We're sorry GroupDocs doesn't work properply without JavaScript enabled.

Free Support Forum - groupdocs.com

Integration into an angular application

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?



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;

  declarations: [
  imports: [
  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';

  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!