How to Add an Angular Report Viewer to Your Web Application

ActiveReportsJS is a simple yet powerful front-end reporting solution that offers its users embeddable components for their web applications. Developers can use and tweak our Report Viewer and Designer Components within an evolving list of front-end frameworks and libraries such as Angular, React, Vue, and more.

In this tutorial, we will walk through constructing a basic Angular project in Visual Studio Code that uses ActiveReportsJS to view/export a basic report, following these steps:

• Getting Started with the Angular App
• Installing ActiveReportsJS Dependencies using Node Package Manager or Yarn
• Registering the ARJS Angular Module
• Importing CSS Styling
• Adding an ARJS Report File to the Angular App
• Adding the Angular Viewer Component to the Code
• Running/Debugging the Project

Getting Started with the Angular App

To start working on your app, you’ll need to ensure you have the Angular CLI installed on your machine (version 11 or higher). If not, run the following command in the Visual Studio Code terminal:

    npm install -g @angular/cli

Unless you already have an Angular 11+ project created, you’ll have to start from scratch. First, make sure that you are in the desired directory to create your application. Afterward, input the following command into the Visual Studio Code terminal to create a run-of-the-mill application:

    ng new arjs-angular-viewer-app –defaults

Installing ActiveReportsJS Dependencies using Node Package Manager or Yarn

To include the Angular Report Viewer Component in our project, we’ll need to start by installing the ARJS packages through NPM. For this to work, make sure that you open the freshly created project folder in VS Code before running this command in the terminal:

    npm install @grapecity/activereports-angular

If you are using Yarn, paste the following command into the terminal:

    yarn add @grapecity/activereports-angular

Registering the ARJS Angular Module

To include the ActiveReportsModule in the project, paste the following code into the _src/app/app.module.ts _file:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { ActiveReportsModule } from '@grapecity/activereports-angular';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, ActiveReportsModule],
      providers: [],
      bootstrap: [AppComponent],
    })

    export class AppModule {}

Importing CSS Styling

Since we have installed the proper dependencies and included the Report Viewer Module, we can add some code to style the Viewer Component and UI. To do this, open the src/styles.css file and add the following code to the top of the page:

    @import "@grapecity/activereports/styles/ar-js-ui.css";
    @import "@grapecity/activereports/styles/ar-js-viewer.css";

Before we actually add the Report Viewer Component to our Angular app, we have to add some more styling. We will see the environment for hosting the Report Viewer Component soon, but for now, understand that the Viewer will be placed in a div element with an id of viewer-host. For now, copy the following code into the src/app/app.component.css file to finish the CSS styling of our project:

    #viewer-host {
      width: 100%;
      height: 100vh;
    }

Adding an ARJS Report File to the Angular App

Since our Angular Viewer Component will open ARJS report templates, we will need to configure a report to be displayed by default. Since ActiveReportsJS uses the extension of .rdlx-json for its report files, there are a few different routes we can follow to create/add a report to our Angular project. We can structure the report using JSON syntax, create a report programmatically using the ARJS API, or design a report in the Standalone Report Designer.

For this tutorial, we will structure our file using JSON within VS Code. Let’s get started by adding a new file to the src/assets folder and naming it report-test.rdlx-json. Let’s copy this code into the file to embed a report name and basic textbox control into its structure:

    {
      "Name": "report-test",
      "Body": {
        "ReportItems": [
          {
            "Type": "textbox",
            "Name": "TextBox1",
            "Value": "Thank you for reading this Angular blog!",
            "Style": {
              "FontSize": "16pt"
            },
            "Width": "8.5in",
            "Height": "2in"
          }
        ]
      }
    }

Adding the Angular Viewer Component to the Code

Finally, we need to replace the code within the src/app/app.component.ts file to finish the setup of the Viewer Component and connect our report template that we just created. Not only will this display our report when the application is run, but it will also allow us to export to multiple different formats as well, such as PDF, HTML, and CSV. Let’s paste this into the app.component.ts file to make the necessary changes:

    import { Component, ViewChild } from '@angular/core';

    import {
      AR_EXPORTS,
      HtmlExportService,
      PdfExportService,
      ViewerComponent,
      TabularDataExportService,
    } from '@grapecity/activereports-angular';

    @Component({
      selector: "app-root",
      template:
        '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
      styleUrls: ["./app.component.css"],
      providers: [
        {
          provide: AR_EXPORTS,
          useClass: PdfExportService,
          multi: true,
        },
        {
          provide: AR_EXPORTS,
          useClass: HtmlExportService,
          multi: true,
        },
        {
          provide: AR_EXPORTS,
          useClass: TabularDataExportService,
          multi: true,
        },
      ],
    })

    export class AppComponent {
      @ViewChild(ViewerComponent, { static: false }) reportViewer!: ViewerComponent;
      onViewerInit() {
        this.reportViewer.open('assets/report-test.rdlx-json');
      }
    }

Running/Debugging the Project

To run the following project on localhost, you will have to place the npm start command in the terminal if you are using the node package manager or yarn start if you are using yarn. However, there is a chance that we will encounter a JavaScript memory error if we don’t change the package.json file’s start script. Let’s replace that start script with the following line:

    "start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",

Now let’s go ahead and run the project with the same command: npm start or yarn start. Open a web browser and navigate to http://localhost:4200. If all goes well, you should see the Angular Viewer Component on the page, as well as the report file that we created. In that case, well done on successfully adding the Report Viewer to your ARJS application!

Final Direction

After reading through the blog, you should feel a little more comfortable knowing that you can easily add ARJS components to your Angular projects. If some of your questions were left unanswered, or if you are looking for detailed help with a specific scenario, check out our documentation or open a case with our support team. As always, thank you so much for following along with me and for using ActiveReportsJS!