Create an Angular Front-End Application with a Report Designer

• Sep 03, 2020
• 3 minutes to read

Note

You can use the DevExpress Angular SPA template to create an Angular Reporting application. For more information, refer to the following help topic: Create an ASP.NET Core Backend Application with Angular UI and Report Designer.

You should create two projects: a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Server (Back-End) Application

Perform the steps described in one of the following topics to create a backend application:

• Report Designer Server-Side Configuration (ASP.NET MVC)
• Report Designer Server-Side Configuration (ASP.NET Core)

Client (Front-End) Application

Perform the following steps to create an Angular client-side application:

1. Install Node.js and npm if they do not exist on your machine. Check whether the latest version of npm is installed.

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

   npm install -g @angular/cli
   

3. Create a new folder (JS in this example) to store all the files related to the client-side functionality.

4. Navigate to the JS folder and run the following command to create a new project:

   ng new angular-report-designer
   

   Refer to the Angular documentation for information on the application structure.

5. Open the package.json configuration file and add the following packages:

   JSON

   ...
     "dependencies": {
       ...
       "devextreme": "20.1.*",
       "devexpress-richedit": "20.1.*",
       "@devexpress/analytics-core": "20.1.*",
       "devexpress-reporting-angular": "20.1.*"
     },
   ...
   

   Note

   Frontend and backend applications should use the same version of DevExpress controls.

   Tip

   The devexpress-richedit package enables the Rich Text Editor for the XRRichText control. You can exclude this package to reduce the node_modules folder size.

6. Change your current directory to the project root folder and install packages:

   cd angular-report-designer
   
   npm install
   

7. Replace the JS\angular-report-designer\src\app\app.module.ts file content with the following code:

   app.module.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. Replace the JS\angular-report-designer\src\app\app.component.html file content with the following code that uses the dx-report-designer Angular component:

   HTML

   <div>
   <dx-report-designer [reportUrl]="reportUrl" height="700px" >
       <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
   </dx-report-designer>
   </div>
   

9. Replace the JS\angular-report-designer\src\app\app.component.ts file content with the following code:

   app.component.ts

   import { Component, ViewEncapsulation } from '@angular/core';
   import 'devexpress-reporting/dx-richedit';
   
   @Component({
   selector: 'app-root',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './app.component.html',
   styleUrls: [
       "../../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-richedit/dist/dx.richedit.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 {
   title = 'DXReportDesignerSample';
   getDesignerModelAction = "/ReportDesigner/GetReportDesignerModel";
   // The report's path. The Report Designer opens it when the application starts.
   reportUrl = "Products";
   // Backend's project URI.
   hostUrl = 'http://localhost:54111/';
   }
   

   Important

   This example uses the report name and server port specified in the code above. You can change these settings to the values defined in your backend application.

10. Run the backend project.

11. Switch to the client root folder (JS\angular-report-designer) and run the command to launch the server and rebuild the application:

    ng serve
    

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