Integration into an angular application

GroupDocs.Total Product Family
1

Hi Guys,

I have not been able to find how to integrate this platform into an angular application. It is not will stated here

Please who can help?

Thanks.

2

@lawaldare

Welcome to GroupDocs.Total Forum!

To get started please check all the available components at NPM in the @groupdocs.examples.angular scope.

Let me list the basic steps of integrating Viewer component in an Angular app (the complete angular app is attached in viewer-component-integration.zip (122.1 KB)

  • Install the package npm i @groupdocs.examples.angular/viewer
  • Update app.module.ts file to
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app.component';
import { ConfigService } from '@groupdocs.examples.angular/common-components';
import { ViewerModule } from '@groupdocs.examples.angular/viewer';

export function configServiceFactory() {
  let config = new ConfigService();
  config.apiEndpoint = "http://localhost:8080"; // set your api endpoint
  return config;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ViewerModule
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' },
  {
    provide: ConfigService,
    useFactory: configServiceFactory
  },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Update app.component.ts file to
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<gd-viewer></gd-viewer>`,
  styles: []
})
export class AppComponent { }
  • Run the app ng serve and navigate to http://localhost:4200/
  • You’ll see the empty page and the error in the browser console that’s because UI requires backend to work properly
  • Download this self_host_api.zip (151.7 KB) sample application, unpack and run it with dotnet run
  • Now the application should work as expected

You can find more integration examples in Demo projects

Feel free to ask any additional questions!