Document Viewer Integration in Angular

• Oct 29, 2020
• 3 minutes to read

Note

The complete sample project How to use the Web Document Viewer in JavaScript with Angular is available in the DevExpress Examples repository.

You can use the server-side model to implement the HTML5 Document Viewer in JavaScript with Angular.

The project consists of the server and client parts.

Server (Back-End) Application

Review the following topics to create a back-end application:

• Document Viewer’s Server-Side Configuration (ASP.NET MVC)
• Document Viewer Server-Side Application (ASP.NET Core)

Client (Front-End) Application

Perform the following steps to create and configure the client part:

1. Make sure you have the current Node.js version with npm installed on your machine.

   node -v
   npm -v
   

2. Open the console window and install the Angular CLI globally.

   npm install -g @angular/cli
   

   When prompted for options, select default settings (press Enter).

3. Create a new folder to store client files. Navigate to the created folder and run the command to create a new project:

   ng new angular-example
   

   Refer to the Angular documentation for information on the Angular application structure.

4. Open the package.json configuration file in the application root folder. Add the following packages:

   package.json

     "dependencies": {
   
       "devexpress-reporting-angular": "^19.2.15",
       "@devexpress/analytics-core": "^19.2.15",
       "core-js": "^3.4.3",
       "devexpress-reporting": "^19.2.15",
       "devextreme": "^19.2.15",
   
     },
   

   Note

   Front-end and back-end applications should use the same version of DevExpress controls.

5. Navigate to the project root folder and install the packages:

   cd angular-example
   npm install
   

   Installed libraries are copied to the node_modules folder.

6. Replace the content of the angular-example\src\app\app.module.ts file with the following code:

   app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   import { DxReportViewerModule } from 'devexpress-reporting-angular';
   
   @NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       DxReportViewerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
   

7. Replace the content of the angular-example\src\app\app.component.html file with the following code that inserts the dx-report-viewer Angular component:

   app.component.html

   <dx-report-viewer [reportUrl]="reportUrl" height="800px">
   <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
   </dx-report-viewer>
   

8. Replace the content of the angular-example\src\app\app.component.ts file with the following code:

   app.component.ts

   import { Component, ViewEncapsulation } from '@angular/core';
   
   @Component({
   selector: 'app-root',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './app.component.html',
   styleUrls: [
       "../../node_modules/jquery-ui/themes/base/all.css",
       "../../node_modules/devextreme/dist/css/dx.common.css",
       "../../node_modules/devextreme/dist/css/dx.light.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
       "../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
       "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
   ]
   })
   export class AppComponent {
   title = 'DXReportViewerSample';
   // The report's path. The Document Viewer opens it when the application starts.
   reportUrl: string = 'Products';
   // Backend's project URI.
   hostUrl: string = 'http://localhost:54114/';
   // Use this line if you use an ASP.NET MVC backend
   invokeAction: string = "/WebDocumentViewer/Invoke";
   // Uncomment this line if you use an ASP.NET Core backend
   // invokeAction: string = 'DXXRDV';
   }
   

9. Run the server-side project.

10. Use the command below to build and serve the application. You should run this command each time you make changes to the source files:

    ng serve
    

11. Open the http://localhost:4200/ location in browser to see the test report.