Integration in 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:

This document describes how to create and configure the client part for different Angular versions:

  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 list the following third-party packages the Report Designer requires:

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

    Refer to Report Designer Requirements and Limitations for information about the client resources the Web Report Designer requires.

  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. Create aliases for the globalize and cldrjs modules.

    Open the tsconfig.json file and use the paths option to specify all the required aliases.

     ```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/" ] } } }

    
    # [Angular CLI 1.x](#tab/angular1)
    
    In the console, use the following command generate the **webpack.config.js** file:
    
    ``ng eject``
    
    Open the created file and add the following code to the **module.exports** object to create aliases:
    
    ```javascript
    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.

    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
            },
    };
    
  8. In the console window, generate a new report-designer Angular component.

    ng generate component report-designer

  9. Open the report-designer.component.html file and use the dxReportDesigner binding to specify the HTML template.

    <div #scripts></div>
    <div #control style="width:100%; height: 1000px">
      <div data-bind="dxReportDesigner: $data"></div>
    </div>
    
  10. In the report-designer.component.ts file, import the required decorators and modules and write the Report Designer component.

    import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2, Input } from '@angular/core';
    import * as ko from "knockout";
    import { Html } from "devexpress-reporting/dx-report-designer";
    
    @Component({
      selector: 'report-designer',
      templateUrl: './report-designer.component.html'
    })
    
    export class ReportDesignerComponent implements AfterViewInit {
      koReportUrl = ko.observable(null);
      _reportUrl;
      constructor(private renderer: Renderer2) { }
    
      @ViewChild('scripts')
      scripts: ElementRef;
    
      @ViewChild("control")
      control: ElementRef
    
      ngAfterViewInit() {
        const reportUrl = this.koReportUrl,
          host = 'http://localhost:54111/',
          container = this.renderer.createElement("div");
        container.innerHTML = Html;
        this.renderer.appendChild(this.scripts.nativeElement, container);
        ko.applyBindings({
          reportUrl: reportUrl, // The URL of a report that is opened in the Report Designer when the application starts.
          requestOptions: { // Options for processing requests from the Report Designer. 
            host: host, // URI of your backend project.  
            getDesignerModelAction: "/ReportDesigner/GetReportDesignerModel" // Action that returns the Report Designer model.
          }
        }, this.control.nativeElement);
      }
    
      @Input()
      set reportUrl(reportUrl: string) {
        this._reportUrl = reportUrl;
        this.koReportUrl(reportUrl);
      }
      get reportUrl() {
        return this._reportUrl;
      }
    }
    
  11. Open the app.component.html file and specify the root component's HTML template.

    <div style="width:100%; height:100%">
       <report-designer [reportUrl]="reportUrl"></report-designer>
    </div>
    
  12. In the app.component.ts file, modify the root component as follows:

    ...
    export class AppComponent {
      title = 'app';
      reportUrl = "Products";
    }
    
  13. Link global styles for your application in the style.css file.

    @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/report-designer-light.min.css");
    
  14. 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.