How to Add an Angular Report Viewer to Your Web Application

As more businesses shift from traditional desktop applications to web and cloud-based solutions, it's now easier than ever for users to access essential business data anytime, from anywhere. With ActiveReportsJS, delivering company reports through web applications becomes a seamless experience for your users.

ActiveReportsJS is a powerful client-side reporting tool that offers rich, interactive reporting features. It includes both a report viewer and a report designer, which can be effortlessly integrated into leading web frameworks like Angular.

Ready to Add an Angular Report to Your Web Application? Download ActiveReportsJS today!

In this blog, we will show you how to add an Angular Report Viewer component to your Angular application by following the steps below:

• Setting Up the Angular Application in VS Code
• Installing the ARJS Dependencies using NPM or Yarn
• Registering the ARJS Angular Module and Importing CSS
• Creating an ARJS Report File
• Initializing the Angular Report Viewer Component
• Running the Project

Setting Up the Angular Application in VS Code

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. Afterwards, run the following command in the VS Code terminal to start creating an Angular application using the CLI:

ng new arjs-angular-viewer-app –defaults

Then, just make sure you move into the project’s root directory with the following command:

cd arjs-angular-viewer-app

Installing ActiveReportsJS Dependencies Using NPM or Yarn

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

NPM: npm install @mescius/activereportsjs-angular
Yarn: yarn add @mescius/activereportsjs-angular

Registering the ARJS Angular Module and Importing CSS

Now that the ARJS packages have been installed, it’s time to include the ActiveReportsModule in the project. Depending on the version of Angular you're using, there are a couple of ways to do this.

If you’re using anything prior to Angular 17, you’ll need to go into the app.module.ts file, import the following file, and add the module to your imports:

import { ActiveReportsModule } from '@mescius/activereportsjs-angular';
...
imports: [ActiveReportsModule],

If you’re using Angular 17+, they’ve since transitioned to using standalone components, meaning that you’ll need to import the module in whatever component will be using it:

import { Core } from '@angular/core';
import { ActiveReportsModule } from '@mescius/activereportsjs-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ActiveReportsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent{}

Now that we’ve 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 imports to the top of the page:

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

Before we actually add the ARJS Report Viewer component to our application, we have to add some more styling. We will see the environment for hosting the Angular 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;
}

Creating an ARJS Report File

Since our Angular Report Viewer component will open ARJS report templates, we will need to configure a report to be displayed by the viewer when it is loaded. Since ActiveReportsJS uses the .rdlx-json extension 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": "Sample Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Thank you for reading this Angular blog!",
        "Style": {
          "FontSize": "16pt"
        },
        "Width": "8.5in",
        "Height": "2in"
      }
    ]
  }
}

Initializing the Report Viewer Component

Finally, we need to add some more code within the src/app/app.component.ts file to finish the setup of the Viewer component, as well as connect the 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, 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 {
  ActiveReportsModule,
  ViewerComponent,
  AR_EXPORTS,
  HtmlExportService,
  PdfExportService,
  TabularDataExportService,
} from '@mescius/activereportsjs-angular';

@Component({
  selector: "app-root",
  standalone: true,
  imports: [ActiveReportsModule],
  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 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 Report 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!

Conclusion

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 and for using ActiveReportsJS!

Ready to Add an Angular Report to Your Web Application? Download ActiveReportsJS today!