Integrate the Report Designer in Angular App

With the Bold Reports Embedded Reporting platform, you can easily embed reporting components in your project to create, bind data to, view, and export pixel-perfect paginated reports.

Angular is one of the most widely used front-end frameworks, and it has recently launched a major release, version 10, with improvements in framework, Angular Material, and the CLI. We offer a way to display paginated reports in the Angular framework with the help of a report-processing unit on the server side.

In this blog, I will walk you through the integration of our Angular Report Designer component in an Angular CLI application. The Angular CLI application will render the report in a browser and the processing of the report is handled using a Web API application.

If you are using an older version of Bold Reports Angular (< v2.2.28), then refer to Getting Started for earlier versions.

Prerequisites

• Node JS(version 8.x or 10.x)
• NPM(v3.x.x or higher)

Install the Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, and maintain Angular applications directly from a command shell.

Run the below command to install the Angular CLI globally.

npm install -g @angular/cli@latest

Create a new application

To create a new Angular application, run the following command in the command prompt.

ng new project-name
Example: ng new report-designer

Angular routing is a module that helps an application become a single-page application. The router is able to navigate among multiple pages.

In the command prompt, add the Angular routing to your application by entering “y” in the prompt window. Then select the Enter key.

Now, choose the CSS stylesheet format using the arrow keys and then press Enter. The Angular CLI installs the required Angular npm packages and other dependencies.

Let’s dive into the integration of the Bold Reports Angular designer component.

Configure Bold Report Designer in Angular CLI

1. To configure the Report Designer component, change the directory to your application’s root folder, which we created a while ago.

   cd project-name
   Example: cd report-designer

2. Bold reporting packages are distributed in npm as @boldreports/angular-reporting-components. So install the Bold Reports Angular library by executing the following command.

   npm install @boldreports/angular-reporting-components --save

3. Then, install Bold Reports typings by executing the following command. The Bold Reports typings package is nothing but the TypeScript definitions for Bold Reports Embedded Reporting components.

   npm install --save-dev @boldreports/types

   The folder structure of the Report Designer Angular application is shown in the following image.

   

4. Now, let’s register the @bold-reports/types under the typeRoots and add the typings, jquery, and reports.all to the tsconfig.app.json file.

   

5. The Report Designer requires a window.jQuery object to render the component. Import jQuery in the src/polyfills.ts file as in the following code snippet.

   import * as jquery from 'jquery';
   window['jQuery'] = jquery;
   window['$'] = jquery;

Add CSS reference

The theme gives life to any Angular component. Open the angular.json file from your application’s root directory and reference the web Report Designer component styles bold.reports.all.min.css and bold.reportdesigner.min.css under the styles node of the projects section as in the following code snippet.

"./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css",
"./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css"

If you are using Angular 6 or a lower-version project, add the changes in angular-cli.json file.

Add CodeMirror reference

CodeMirror is a versatile text editor that comes with fully featured code and syntax highlighting to help with reading and editing complex code. The Report Designer uses the CodeMirror scripts and styles to provide syntax highlighting for the edit option of SQL queries and Visual Basic code functions.

1. Run the following command to install the CodeMirror dependencies.

   npm install codemirror
   

2. Open the angular.json file from your application’s root directory and reference the CodeMirror script and styles under the scripts and styles node of the projects section as in the following code snippet.

 
           "styles": [
            "src/styles.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css",
            "./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reportdesigner.min.css",
            "./node_modules/codemirror/lib/codemirror.css",
            "./node_modules/codemirror/addon/hint/show-hint.css"
            ],
            "scripts": [
              "./node_modules/codemirror/lib/codemirror.js",
              "./node_modules/codemirror/addon/hint/show-hint.js",
              "./node_modules/codemirror/addon/hint/sql-hint.js",
              "./node_modules/codemirror/mode/vb/vb.js"
            ],

Add the scripts reference

We need to add the following scripts from the table to render the report item in the designer.

1. Open the angular.json file from your application’s root directory.
2. Reference the following scripts under the scripts node of the projects section as in the following code snippet.

   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/ej2-base.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/ej2-data.min.js",
    "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/ej2-pdf-export.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/ej2-svg-base.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-lineargauge.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-circulargauge.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/bold.reports.common.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/bold.reports.widgets.min.js",
    "./node_modules/@boldreports/javascript-reporting-controls/Scripts/common/bold.report-designer-widgets.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/bold.report-designer.min.js",
   "./node_modules/@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min.js"
   

   

Add the Report Designer component

To add the web Report Designer component, refer to the following steps:

1. 1. Open the src/app/app.module.ts file.
   2. Import the BoldReportDesignerModule from @boldreports/angular-reporting-components package.

      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { BoldReportDesignerModule  } from '@boldreports/angular-reporting-components';
      import { AppRoutingModule } from './app-routing.module';
      import { AppComponent } from './app.component';
      @NgModule({
        declarations: [
          AppComponent
        ],
      imports: [
          BrowserModule,
          BoldReportDesignerModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
      

   3. Open the src/app/app.component.html file and initialize the web Report Designer.
   4. You can replace the following code snippet in the app.component.html file.

      <bold-reportdesigner id="designer" style="position: absolute;height: 550px; width: 1250px;">
      </bold-reportdesigner>

   5. Open the src/app/app.component.ts and replace the following code snippet.

      import { Component } from '@angular/core';
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        title = 'reportdesignerapp';
        public serviceUrl: string;
          constructor() {
              // Initialize the Report Designer properties here.
          }
      }
      

Set Web API service URL

The web Report Designer requires a Web API service to process the data and file actions. Refer to the following link to create the Web API service.

ASP.NET Web API service

ASP.NET Core Web API service

You can skip this step and use our online Web API services to create, edit, and browse reports. Otherwise, you must create one of the previous Web API services.

To set a Web API service, open the app.component.ts file and add the code snippet as in the constructor.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;
    constructor() {
        this.serviceUrl = "https://demos.boldreports.com/services/api/ReportingAPI";
    }
}

Open the app.component.html to set the ServiceUrl property of web Report Designer as in the following code snippet.

<bold-reportdesigner id="designer" [serviceUrl] = "serviceUrl" style="position: absolute;height: 550px; width: 1250px;">
</bold-reportdesigner>

Serve the application

1. Go to the workspace folder (report-designer).
2. Launch the server by using the following CLI command with the –open option.

   ng serve --open

   The ng serve command serves the application and the –open option automatically opens your browser to http://localhost:4200/

Conclusion

In this blog, we have learned how to use the Bold Reports Report Designer component in Angular. To explore further, I recommend you go through our sample reports and documentation.

If you have any questions, please post them in the comments section below. You can also contact us through our contact page or, if you already have an account, you can log in to submit your support question. Feel free to check out the Bold Reports Embedded edition demos and documentation to explore the available tools and their various customization features.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about new releases.