How to Add an Angular Report Viewer to Your Web Application
What You Will Need
• Visual Studio Code
• NPM
• ActiveReportsJS
Controls Referenced
• Getting Started: Angular Report Viewer
• Report Viewer: Overview
Tutorial Concept
Learn how to seamlessly integrate an Angular Report Viewer into your web application to render, view, and interact with dynamic reports directly within your Angular project.
As more organizations transition from traditional desktop apps to web-based and cloud-first platforms, providing secure, anytime-anywhere access to business reports has become essential. Enter ActiveReportsJS, a powerful JavaScript-based reporting tool built for the modern web.
With ActiveReportsJS Angular integration, delivering polished, interactive reports within your Angular applications becomes a breeze. It ships with both a visual report designer and a report viewer component, making it an ideal solution for developers aiming to embed business intelligence directly into their web interfaces.
In this tutorial, we’ll walk you through how to add the Angular report viewer component to your app using ActiveReportsJS.
What We’ll Cover:
- Create a New Angular Project
- Install ActiveReportsJS Packages
- Register the Angular Module and Apply CSS
- Create a Sample Report File
- Initialize the Angular Report Viewer Component
- Run the Angular Project
Prerequisites
Ensure you have Angular CLI v11 or higher installed. If not, install it globally:
npm install -g @angular/cli@latest
Step 1: Create a New Angular Project
Start by generating a fresh Angular project using the CLI. Open Visual Studio Code and run:
ng new arjs-angular-viewer-app --defaults
cd arjs-angular-viewer-app
Step 2: Install ActiveReportsJS Packages
To bring the report viewer into your Angular app, install the ActiveReportsJS Angular package. Inside the project folder, run either of the following:
Using NPM:
npm install @mescius/activereportsjs-angular
Or with Yarn:
yarn add @mescius/activereportsjs-angular
Step 3: Register the Angular Module and Apply CSS
Depending on your Angular version, you’ll integrate the report module differently:
For Angular 11–16
In app.module.ts
, import and register the ActiveReportsModule
:
import { ActiveReportsModule } from '@mescius/activereportsjs-angular';
...
imports: [ActiveReportsModule],
For Angular 17 and above
Angular 17 introduces standalone components. Here’s how to use them in app.component.ts
:
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{}
Import Required CSS
Now, add the required styling to src/styles.css
:
@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";
Also, add the following to src/app/app.component.css
to style the viewer’s container:
#viewer-host {
width: 100%;
height: 100vh;
}
Step 4: Create a Sample Report File
ActiveReportsJS uses .rdlx-json
files to define report templates. Let’s create one manually for demo purposes.
- Inside the
src/assets
folder, create a new file namedreport-test.rdlx-json
. - Paste the following JSON 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"
}
]
}
}
This simple report includes a single text box with a message. Of course, you can later replace this with a full-fledged report created in the visual designer.
Step 5: Initialize the Angular Report Viewer Component
Let’s now wire up the component in src/app/app.component.ts
. Here’s the complete implementation:
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');
}
}
This setup ensures your report viewer is functional and export-ready.
Step 6: Run the Angular Project
To avoid memory issues on some machines, edit the start
script in package.json
like so:
"start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",
Now start your project using:
npm start
OR
yarn start
Open a browser and visit http://localhost:4200. If all goes well, you’ll see your embedded Angular report viewer with the sample report loaded.
Wrapping Up
And there you have it — a fully functional web-based reporting tool in Angular using ActiveReportsJS! You now know how to install the required dependencies, create a report template, and embed the viewer with export options.
If you’re curious to explore more, the official ActiveReportsJS documentation is full of examples, API references, and advanced scenarios.
Thanks for following along, and happy coding!