v2.0.0
v2.1.0v2.0.0v1.2.0

ActiveReportsJS Angular Report Viewer Component

This page provides a detailed overview of ActiveReportsJS Angular Report Viewer Component. You can check the Get Started tutorial for a concise guide for integrating this component into an Angular application.

ActiveReportsJS Angular NPM package

We distribute the library that contains the ActiveReportsJS Angular Report Viewer Component via the @grapecity/activereports-angular npm package. The main @grapecity/activereports package provides the core functionality.

ActiveReportsJS Angular Module

ActiveReportsJS Angular Report Viewer Component resides in the ActiveReportsModule Angular module, so it should be imported to the application's root module or other module that is gosing to use Report Viewer, for example:

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 {}

ActiveReportsJS Angular Report Viewer Component API

You can include the ActiveReportsJS Angular Report Viewer Component in the component's HTML template with the gc-activereports-viewer tag. You can use the following input properties of the ViewerComponent to set its appearance.

Property Type Default Value Description
width CSS Unit '100%' sets the width of ViewerComponent
height CSS Unit '100%' sets the height of ViewerComponent
language string sets the language of ViewerComponent interface. Check Localization page for more information
panelsLocation 'sidebar' | 'toolbar' 'sidebar' sets the location of Search and Export UI
exportsSettings Object sets the export settings. Check the Export Settings page for more information
availableExports Array of strings [] sets the list of export filters that should be available for a user. Check ActiveReportJS Export Services section for more information.
mouseMode 'Pan' | 'Selection' Pan sets the mouse mode of ViewerComponent.
renderMode 'Galley' | 'Paginated' Paginated sets the render mode of ViewerComponent
viewMode 'Continuous' | 'SinglePage' Continuous sets the mode of displaying a multi-page report
zoom 'FitWidth' | 'FitPage' | number 100 sets the zoom level of displayed pages
fullscreen boolean false ViewerComponent is displayed in FullScreen mode if this property is set to true
toolbarVisible boolean true sets visibility of the toolbar of ViewerComponent
sidebarVisible boolean true sets visibility of the sidebar of ViewerComponent
errorHandler function null the callback that invoked if the error occurs in ViewerComponent

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI. Check Customization page for more information.

In additon, ViewerComponent exposes the following output properties:

Event Parameters Description
init occurs when ViewerComponent is loaded
reportLoaded ReportLoadEventArgs occurs when a report is loaded in the ViewerComponent before rendering is started
documentLoaded DocumentLoadEventArgs occurs when a report rendering completes

Finally, the parent component can access methods and properties of the Viewer Class instance using the ViewChild injection.

@ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;

ActiveReportJS Export Services

ActiveReportJS Angular Module includes services that allow exporting a report to PDF, XLS, or HTML format. You have to inject these services in the viewer's host component or its module or the application's root module. Here is an example of code that injects export services in the root module

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [    {
    provide: AR_EXPORTS,
    useClass: PdfExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: HtmlExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: XlsxExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}

You can also use the availableExports input property of ViewerComponent to restrict the list of available exports. Perhaps for some reports, it's desirable to leave PDF export only in the user interface.