Document Viewer Integration in Angular

• Nov 12, 2018
• 3 minutes to read

Tip

Online Example: How to use the Web Document Viewer in JavaScript with Angular

You can use the HTML5 Document Viewer in JavaScript with Angular based on the server-side model. You should create two parts: a server (backend) and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Important

Perform the steps from one of the following topics to prepare a backend application:

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

This document describes how to create and configure the client part:

1. Install Node.js and npm if they do not exist on your machine.

2. Open the console window and install the Angular CLI (command line interface tool) globally.

   npm install -g @angular/cli
   

3. Create a new folder to store all the files related to the client-side functionality.

4. Navigate to the added folder and run the following command in the console to create a new project:

   ng new angular-example
   

   Refer to the Angular documentation for information on the application’s structure and the created files’ purposes.

5. Open the package.json configuration file and add the devexpress-reporting-angular package:

   JSON

   ...
     "dependencies": {
       ...
       "devexpress-reporting-angular": "~18.2.3",
     },
   ...
   

6. In the console, run the following commands to change the directory to the created project’s folder and install the packages:

   cd angular-example
   
   npm install
   

   You can find all the libraries in the node_modules folder after the installation is completed.

7. Import DxReportViewerModule in your module (for instance, in the AppModule class) as shown below:

   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 { }
   

8. Use the dx-report-viewer Angular component in your HTML file (for example, app.component.html) as demonstrated below:

   HTML

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

9. In the app.component.ts file, import decorators, link styles and specify the component’s options.

   TS

   import { Component, ViewEncapsulation } from '@angular/core';
   
   @Component({
       selector: 'my-app',
       templateUrl: './app.component.html',
       encapsulation: ViewEncapsulation.None,
       styleUrls: [
           './app.component.css',
           "../../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 {
       // The URL of a report to open in the Report Designer when the application starts.
       reportUrl: string = 'InvoiceReport';
        // URI of your backend project.
       hostUrl: string = 'http://localhost:11111/';
   
       // 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';
   }
   

10. Open the tsconfig.json file and use the paths option to create aliases for the globalize and cldrjs modules.

    JSON

    {
        "compileOnSave": false,
        "compilerOptions": {
            ...
            "paths": {
                "globalize": [
                    "./node_modules/globalize/dist/globalize"
                ],
                "globalize/*": [
                    "./node_modules/globalize/dist/globalize/*"
                ],
                "cldr": [
                    "./node_modules/cldrjs/dist/cldr"
                ],
                "cldr/*": [
                    "./node_modules/cldrjs/dist/cldr/*"
                ]
            }
        }
    }
    

11. For the example to work correctly, you should first run a backend project in Visual Studio, and then run the client part.

    Use the command below to launch the server and rebuild the application each time you make changes to the source files:

    ng serve
    

    Open your browser on http://localhost:4200/ to see the result.