Get Started with ActiveReportsJS Angular Report Viewer Component

Create Angular Application

The easiest and recommended way for creating a new Angular application is to use Angular CLI. Run the following command from the command prompt or terminal to create an Angular application with default options. For details, see options on the Angular site.

ng new arjs-angular-viewer-app --defaults

Install ActivereportsJS npm packages

We distribute the Angular Report Viewer Component via @grapecity/activereports-angular npm package. The main @grapecity/activereports package provides the core functionality. To install the latest version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-angular @grapecity/activereports

Or if you are using yarn:

yarn add @grapecity/activereports-angular @grapecity/activereports

Import ActiveReportsJS styles

Open the src\styles.css file and add the following code. It imports the default Report Viewer Component Styles

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

Register ActivereportsJS Angular module

Open the src\app\app.module.ts file and replace its content with the following code. It registers the ActiveReportsModule module in addition to the standard modules.

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

import { AppComponent } from './app.component';

  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files. In the src\assets folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

  "Type": "report",
  "Body": {
    "Name": "Body",
    "Type": "section",
    "ReportItems": [
        "Type": "textbox",
        "Name": "textbox1",
        "Style": { "FontSize": "18pt" },
        "Value": "Hello, ActiveReportsJS Viewer",
        "Height": "10in"
  "Name": "Report"

Add ActiveReportsJS Angular Report Viewer Component to the application

Open src\app\app.component.ts and replace its content with the following code. The template of the component uses the Angular Report Viewer Component. The handler of its init event opens the report.rdlx-json that you created on the previous step. The component also injects the ActiveReportsJS Angular Export Services so that the report viewer allows us to export the report to supported formats.

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

  selector: "app-root",
    '<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: XlsxExportService,
      multi: true,
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {

Open src\app\app.component.css file and add style for the viewer-host element

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

Run and test the application

Run the application using npm start or yarn start or ng serve commands. When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting the report to one of the available formats.