Sitemap
MESCIUS inc.

Sharing stories, concepts, and code.

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.

  1. Inside the src/assets folder, create a new file named report-test.rdlx-json.
  2. 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.

Report Viewer

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!

--

--

MESCIUS inc.
MESCIUS inc.

Written by MESCIUS inc.

We provide developers with the widest range of Microsoft Visual Studio components, IDE platform development tools, and applications.

No responses yet