Angular Component

• Supports Angular version 7.* or higher.

The ActiveReportsJS Viewer component for Angular allows you to use the viewer in Angular templates markup.

In terms of the TypeScript class inheritance feature, when you acquire a reference to the ActiveReportsJS Viewer component, the referenced instance is ActiveReportsJS Viewer control with all its properties, events and methods, and the Angular component at the same time. The ActiveReportsJS Viewer component extends the control class and adds the necessary functionality that allows the control to be used in the Angular template markup, with the fully functional one-way and two-way property bindings and event bindings. This integration is smooth, as all the players, ActiveReportsJS Viewer Angular component or control, and Angular itself are written in the same TypeScript language.

ActiveReportsJS Viewer component for Angular is shipped as a separate NPM package. The latest version of the package can be installed from NPM by executing the following command from NodeJS command prompt:

npm install @grapecity/activereports-angular

See this topic for more details about ActiveReportsJS NPM packages.

After that you can import Angular modules using ESM import statements. For example, the following import statement imports the content of the "activereports-angular" module:

import { ActiveReportsModule } from '@grapecity/activereports-angular';

Import ActiveReportsJS Viewer component for Angular

With this setup, you may import Angular module and use the Angular component in your application. For example, this code adds a ViewerComponent to AppComponent's template, with the reportviewer property containing a reference to the added component:

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

@Component({
  selector: 'app-root',
  templateUrl: '<gc-activereports-viewer height="100%" #reportviewer></gc-activereports-viewer>'
})

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

  ngAfterViewInit() {
    this.reportviewer.init.subscribe(() =>{
      this.reportviewer.open("assets/InvoiceList.rdlx-json");
            });
    });
  }
}  

To set style for the viewer, add the following import statement in 'src/styles.css' file.

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

If you want to add export capabilities in the viewer, add the export providers using the following import statement.

import { HtmlExportService, PdfExportService, XlsxExportService, AR_EXPORTS } from '@grapecity/activereports-angular';

The export providers need to be registerd in the providers array.

Create ActiveReportsJS Viewer control in code

ActiveReportsJS Viewer component for Angular is intended to be used in Angular templates markup. If you want to create its control in code, you should use the control from '@grapecity/activereports' module, instead of '@grapecity/activereports-angular'. Note that the module has the same name as a corresponding Angular interop module, but without the "-angular" word in the name. The following code creates a ActiveReportsJS Viewer control in code:

import { Viewer } from '@grapecity/activereports';
var v = new Viewer.Viewer('#ARJSviewerDiv');