ActiveReportsJS in Angular

Following are the prerequisites before you start using ActiveReportsJS in Angular framework.


  • Node.js
  • Yarn
  • Angular-CLI - Install the global tool for Angular application using command
   npm install -g @angular/cli


   yarn global add -g @angular/cli

The following steps show how to view an existing report in an Angular application.

  1. Create a new Angular CLI application by typing following command in command console
   ng new arjs-angular --defaults
  1. Make this directory your working directory
   cd arjs-angular
  1. Add reference to ActiveReportsJS Angular module
   npm install @grapecity/activereports-angular


   yarn add @grapecity/activereports-angular
  1. Install localization module
   npm install @grapecity/activereports-localization


   yarn add @grapecity/activereports-localization
  1. Modify 'src/app/app.component.html' file to contain following code
   <gc-activereports-viewer [height]="height" [availableExports]="availableExports" (documentLoaded)="onDocumentLoaded($event)" #reportviewer></gc-activereports-viewer>
  1. Register ActiveReports module in 'src/app/app.module.ts' file
   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { ActiveReportsModule } from '@grapecity/activereports-angular';
   import '@grapecity/activereports-localization';

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

     declarations: [
     imports: [
     providers: [],
     bootstrap: [AppComponent]
   export class AppModule { }
  1. Place the report you want to view (for example, InvoiceList.rdlx-json) in the 'src/assets' folder of the application.

  2. Modify 'src/app/app.component.ts' file.

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { ViewerComponent } from '@grapecity/activereports-angular';
   import { HtmlExportService, PdfExportService, XlsxExportService, AR_EXPORTS } from '@grapecity/activereports-angular';

     selector: 'app-root',
     templateUrl: './app.component.html',
         provide: AR_EXPORTS,
         useClass: PdfExportService,
         multi: true
         provide: AR_EXPORTS,
         useClass: HtmlExportService,
         multi: true
         provide: AR_EXPORTS,
         useClass: XlsxExportService,
         multi: true

   export class AppComponent implements AfterViewInit {
     @ViewChild('reportviewer', { static: false }) reportviewer: ViewerComponent;

     title = 'ActiveReports Angular App';
     height = '600px';
     availableExports = ['pdf', 'xlsx'];
     language = 'ja';
     onDocumentLoaded = function(a: any){
       console.log("document loaded", a);

    ngAfterViewInit() {
       this.reportviewer.init.subscribe(() =>{
         var htmlBtnIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24"><path class="gc-icon-color--text" d="M19 26v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v6c0 1.1.9 2 2 2h5v2H6c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h13zM13 3v6c0 .6.5 1 1 1h5l-6-7zM6 14c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2H6zm23 8v1h-5v-7h1v6h4zm-15-5v6h1v-6h2v-1h-5v1h2zm-4 2v-3h1v7h-1v-3H7v3H6v-7h1v3h3zm10.5 0L19 16h-1v7h1v-5l1 2h1l1-2v5h1v-7h-1l-1.5 3z" fill-rule="evenodd" clip-rule="evenodd" /></svg>';
           key: '$html-export-btn',
           icon: {type:'svg', content:htmlBtnIcon },
           title: "HTML Export",
           enabled: true,
           action: () => { this.reportviewer.export('html', []).then(result => result.download("Exported_HTML")) }

• If you are working in Angular7, remove '{ static: false }' flag from @ViewChild in src/app/app.module.ts file. This flag was introduced in Angular8 and hence will give error in prior versions.
• The code also demonstrates adding export functionality to the viewer. The PDF and Excel Exports are available through the viewer's pane, while HTML Export is made available from custom button. It is important to register export providers in the providers array for export to work.

  1. Modify 'src/styles.css' file to contain following code
   @import '@grapecity/activereports/styles/ar-js-viewer.css';
  1. In the command console, type following command to run the application
   ng serve
  1. Open 'localhost:4200' in your browser after the application is compiled. You will get a running application.

Refer to the Angular Component topic for more details on using ActiveReportsJS in Angular applications.