V1
V1

ActiveReportsJS in Angular

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

Prerequisites:

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

      or

   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

           or

   yarn add @grapecity/activereports-angular
  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 { AppComponent } from './app.component';

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       ActiveReportsModule
     ],
     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';

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
      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 implements AfterViewInit {
     @ViewChild('reportviewer', { static: false }) reportviewer: ViewerComponent;

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

    ngAfterViewInit() {
       this.reportviewer.init.subscribe(() =>{
         //tslint:disable-next-line:max-line-length
         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>';
         this.reportviewer.toolbar.addItem({
           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")) }
         });
        this.reportviewer.open("assets/InvoiceList.rdlx-json");
       });
     }
   }

Note: 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. 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.