ActiveReportsJS in Angular

Let us see how to create a web application in Angular framework that uses the ActiveReportsJS Viewer component.


  • Node.js
  • npm
  • 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 create 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. Install the ActiveReportsJS package
   yarn add @grapecity/activereports
  1. Import ActiveReportsJS styles to global styles by adding the following source code to 'src/styles.css'
   @import '@grapecity/activereports/styles/ar-js-viewer.css';
  1. Modify 'src/app/app.component.html' file to create an 'ARJSviewerDiv' div:
   <h1>ActiveReportsJS Viewer using Angular-CLI</h1>
   <div id="ARJSviewerDiv" style="height: 100%;"></div>
  1. Modify src/app/app.component.ts file:
   import { Component } from '@angular/core';
   import { Viewer } from '@grapecity/activereports';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   export class AppComponent {
     title = 'arjsviewer-angular-cli app';

     ngOnInit() {
       var v = new Viewer.Viewer('#ARJSviewerDiv');
         Type: 'report',
         Body: {
           Name: 'Body',
           Type: 'section',
           ReportItems: [
             { Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS', Height: '10in' }
         Name: 'Report'
  1. In the command console, type following command to run the application
   ng serve

You will get a running application in the browser.