Document Viewer Integration in Angular2

• Jul 20, 2018
• 4 minutes to read

Tip

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

You can use the HTML5 Document Viewer in JavaScript with Angular by creating two projects: a server (backend) project in ASP.NET MVC implementation and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Note

Perform steps in the Creating a Server Side for the Web Document Viewer topic to create a backend application.

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 created files’ purposes.

5. In the console, use the following commands to change your current directory to the created project’s folder and add the webpack.config.js file:

   cd angular-example ng eject

6. Open the package.json configuration file and list the following third-party packages the Web Document Viewer requires:

   JSON

   ...
     "dependencies": {
       ...
       "devexpress-reporting": "~17.2.5",
       "devextreme": "~17.2.5",
       "globalize":"~1.3.0",
       "cldrjs":"~0.5.0",
       "knockout":"~3.4.2",
       "jquery":"~3.1.1",
       "jquery-ui":"~1.12.1"
     },
   ...
   

   Refer to Document Viewer Requirements and Limitations for a list of the necessary client resources for deploying the control.

7. Switch back to the console and run the command below to install packages:

   npm install

   After installation is completed, you can find all the libraries in the node_modules folder.

8. Open the webpack.config.js file and add the following code to the module.exports object to create aliases for certain modules:

   JS

   module.exports = {
     "resolve": {
       ...
       "alias": {
         globalize$: path.resolve(__dirname, "node_modules/globalize/dist/globalize.js"),
         globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"),
         cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"),
         cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr"),
         ...
       },
    },
   

   Use the code below instead if the alias option is specified in the created project using the rxPaths function. Declare a variable with required paths prior to the module.exports object and then assign this variable to the alias option.

   JS

   const alias = rxPaths();
   alias["globalize$"] = path.resolve(__dirname, "node_modules/globalize/dist/globalize.js");
   alias["globalize"] = path.resolve(__dirname, "node_modules/globalize/dist/globalize");
   alias["cldr$"] = path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js");
   alias["cldr"] = path.resolve(__dirname, "node_modules/cldrjs/dist/cldr");
   
   module.exports = {
     "resolve": {
          ...
          "alias": alias
       },
     "resolveLoader": {
          ...
          "alias": alias
       },
   };
   

9. In the console window, generate a new report-viewer Angular component.

   ng generate component report-viewer

10. Open the report-viewer.component.html file and specify the HTML template using the dxReportViewer binding.

    HTML

    <div #scripts></div>
    <div #control style="width:100%; height: 1000px">
      <div data-bind="dxReportViewer: $data"></div>
    </div>
    

11. In the report-viewer.component.ts file, import the required decorators and modules and write the component for the Web Document Viewer as demonstrated below. Create the required parameters and activate the Knockout bindings.

    TypeScript

    import { Component, ViewChild, AfterViewInit, Renderer2, Input, ElementRef } from '@angular/core';
    import * as ko from "knockout";
    import { Html } from "devexpress-reporting/dx-web-document-viewer";
    
    @Component({
      selector: 'report-viewer',
      templateUrl: './report-viewer.component.html',
      styleUrls: ['./report-viewer.component.css']
    })
    export class ReportViewerComponent implements AfterViewInit {
    
      koReportUrl = ko.observable(null);
      _reportUrl;
    
      @ViewChild('scripts')
      scripts: ElementRef;
    
      @ViewChild("control")
      control: ElementRef
    
      constructor(private renderer: Renderer2) { }
    
      ngAfterViewInit() {
        const reportUrl = this.koReportUrl,
          host = 'http://localhost:54114/',
          container = this.renderer.createElement("div");
        container.innerHTML = Html;
        this.renderer.appendChild(this.scripts.nativeElement, container);
        ko.applyBindings({
          reportUrl, // The URL of a report that is opened in the Document Viewer when the application starts. 
          requestOptions: { // Options for processing requests from the Web Document Viewer. 
            host, // URI of your backend project. 
            invokeAction: "/WebDocumentViewer/Invoke" // The URI path of the controller action that processes requests. 
          }
        }, this.control.nativeElement);
      }
    
      @Input()
      set reportUrl(reportUrl: string) {
        this._reportUrl = reportUrl;
        this.koReportUrl(reportUrl);
      }
      get reportUrl() {
        return this._reportUrl;
      }
    }
    

12. Open the app.component.html file and specify the root component’s HTML template.

    HTML

    <div style="width:100%; height:100%">
      <report-viewer [reportUrl]="reportUrl"></report-viewer>
    </div>
    

13. In the app.component.ts file, modify the root component as follows:

    TypeScript

    export class AppComponent {
      title = 'app';
      reportUrl = "Products";
    }
    

14. Link global styles for your application in the style.css file.

    CSS

    @import url("../node_modules/jquery-ui/themes/base/all.css");
    @import url("../node_modules/devextreme/dist/css/dx.common.css");
    @import url("../node_modules/devextreme/dist/css/dx.light.css");
    @import url("../node_modules/devexpress-reporting/css/web-document-viewer-light.min.css");
    

15. 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:

    npm start

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