Document Viewer Integration in Angular

  • 3 minutes to read

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:

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:

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

    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:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { DxReportViewerModule } from 'devexpress-reporting-angular';
    declarations: [
    imports: [
    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:

    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
  8. Replace the content of the angular-example\src\app\app.component.ts file with the following code:

    import { Component, ViewEncapsulation } from '@angular/core';
    selector: 'app-root',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.component.html',
    styleUrls: [
    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.