How to Add an Angular Report Viewer to Your Web Application

As businesses transition from desktop-based applications to web and cloud-focused technologies, it has become easier for users to access business-critical information from anywhere at any time. Thankfully, ActiveReportsJS makes it easy for your users to access company reports through web applications.

ActiveReportsJS is a client-side reporting solution with highly interactive reporting capabilities, providing both report viewer and report designer components that can be easily integrated into any of the major web frameworks, including 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. 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 NPM 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 @mescius/activereportsjs-angular

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

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. Paste the following code inside of the app.component.ts file:

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{}

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 "@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 '@grapecity/activereports-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!