How to Integrate Document Viewer into an Angular Project

This guide will show you how to integrate Dynamsoft Document Viewer into an Angular project.

You can can download the sample on GitHub:

Angular Helloworld

Preparation

Make sure you have node and Angular CLI (v17 in this guide) installed.

New Project

Create a new Angular project.

ng new ddv-angular

Add Dependencies

1. Install Dynamsoft Document Viewer.

   npm install dynamsoft-document-viewer
   

2. Modify angular.json to copy the resources of Dynamsoft Document Viewer and import its CSS.

   {
     "assets": [
       "src/favicon.ico",
       "src/assets",
       {
         "glob": "**/*",
         "input": "node_modules/dynamsoft-document-viewer/dist",
         "output": "/dynamsoft-document-viewer/dist"
       }
     ],
     "styles": [
       "src/styles.css",
       "node_modules/dynamsoft-document-viewer/dist/ddv.css"
     ]
   }
   

Create a Document Viewer Component

1. Generate a viewer component.

   ng generate component viewer
   

2. Add the following HTML code to viewer.component.html.

   <div id="container"></div>
   

3. Add the following CSS code to viewer.component.css.

   :host, #container {
       width: 100%;
       height: 100%;
   }
   

4. Add the following JavaScript code to viewer.component.ts. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on this page.

   import { Component } from '@angular/core';
   import { DDV } from 'dynamsoft-document-viewer';
   
   @Component({
     selector: 'app-viewer',
     standalone: true,
     imports: [],
     templateUrl: './viewer.component.html',
     styleUrl: './viewer.component.css'
   })
   
   export class ViewerComponent {
     async ngOnInit() {
       DDV.on('error', (e) => {
         alert(e.message)
       })
          
       // Public trial license which is valid for 24 hours
       DDV.Core.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
       DDV.Core.engineResourcePath = '/dynamsoft-document-viewer/dist/engine';
       DDV.Core.loadWasm();
       await DDV.Core.init();
   
       const viewer = new DDV.EditViewer({
         container: 'container'
       });
     }
   }
   

Use the Document Viewer Component

1. Open app.component.html and add the viewer component.

   <style></style>
   <h1>Hello World for Angular</h1>
   <app-viewer
   ></app-viewer>
   <router-outlet></router-outlet>
   

2. Import the viewer component in app.component.ts.

   import { ViewerComponent } from './components/viewer/viewer.component';
      
   @Component({
       selector: 'app-root',
       standalone: true,
       templateUrl: './app.component.html',
       styleUrl: './app.component.css',
       imports: [
         CommonModule,
         RouterOutlet,
         ViewerComponent,
       ],
   })
   

3. Add CSS in app.component.css.

   :host {
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   

Run the app with the following command and you should see the viewer mounted in your application!

ng serve

Other Samples

You can find other samples on this GitHub repo.