Report Designer Integration in Angular

• Nov 12, 2018
• 3 minutes to read

Tip

Online Example: How to use the Web Report Designer in JavaScript with Angular

You can use the End-User Web Report Designer in JavaScript with Angular based on the server-side model. You should create two projects: a server (backend) project 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:

• Report Designer's Server-Side Configuration (ASP.NET MVC)
• Report Designer'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 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 your current directory to the created project’s folder and install packages:

   cd angular-example
   
   npm install
   

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

7. Import DxReportDesignerModule 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 { DxReportDesignerModule } from 'devexpress-reporting-angular';
   
   @NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       DxReportDesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
   

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

   HTML

   <div>
       <dx-report-designer [reportUrl]="reportUrl" height="700px" >
           <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
       </dx-report-designer>
   </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: 'app-root',
       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/analytics-core/dist/css/dx-querybuilder.css",
           "../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
           "../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.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:10000/';
       // Action that returns the Report Designer model.
       getDesignerModelAction: string = 'ReportDesigner/GetReportDesignerModel';
   }
   

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.