ActiveReportsJS Angular Report Designer

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

ActiveReportsJS Angular NPM package

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

ActiveReportsJS Angular Module

The ActiveReportsJS Angular Report Designer resides in the ActiveReportsModule Angular module, so it should be imported to the application's root module or other module that is intended to use the report designer, 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 Designer Component

You can integrate the ActiveReportsJS Angular Report Designer component with the gc-activereports-designer tag. You can use the following input properties.

Property	Type	Description
onInit	()=>DesignerConfig	returns the DesignerConfig object that contains the designer's initialization options
customInitTemplates		Obsolete: use the `onInit` callback instead.
hotkeysEnabled	boolean	Obsolete: use the `onInit` callback instead.
language	string	Obsolete: use the `onInit` callback instead.
fontSet	"default" \| "registered" \| "all"	Obsolete: use the `onInit` callback instead.
dataSources	array of Data Source Templates	sets the Pre-defined data sources and data sets.
reportList	array of Report Resource Info items	sets the Pre-defined report names for a subreport
imageList	array of Image Resource Info items	sets the Pre-defined images for an Image report item
onCreate	onCreate function	adds the New Report button in the designer toolbar and sets the corresponding click handler
onOpen	onOpen function	adds the Open Report button in the designer toolbar and sets the corresponding click handler
onRender	onRender function	adds the Preview Report button in the designer toolbar and sets the corresponding click handler
onSave	onSave function	adds the Save Report button in the designer toolbar and sets the corresponding click handler
onSaveAs	onSaveAs function	adds the Save As.. button in the designer toolbar and sets the corresponding click handler
onOpenFileMenu	onOpenFileMenu function	adds the "File" menu in the designer toolbar and sets the corresponding click handler
report	Report object	loads the specified report in the designer
documentChanged	(args: DocumentChangedEventArgs)=>void	sets the handler for the event that occurs when a report loaded into the designer changes

In addition, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance with ViewChild injection.

@ViewChild(DesignerComponent, { static: false }) reportDesigner: DesignerComponent;