# ActiveReportsJS Angular Report Designer

Learn how to use the ActiveReportsJS Angular Report Designer

## Content

This page provides a detailed overview of the ActiveReportsJS Angular Report Designer component. You can check the [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular) 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 [@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) npm package. The main [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 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:

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@mescius/activereportsjs-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](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) | returns the [DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#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](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#datasourcetemplate) | sets the [Pre-defined data sources and data sets](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets). |
| reportList | array of [Report Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#reportresourceinfo) | sets the [Pre-defined report names for a subreport](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| imageList | array of [Image Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#imageresourceinfo) | sets the [Pre-defined images for an Image report item](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| onCreate | [onCreate function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#oncreate) | adds the [New Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button) in the designer toolbar and sets the corresponding click handler |
| onOpen | [onOpen function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopen) | adds the [Open Report](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button) button in the designer toolbar and sets the corresponding click handler |
| onRender | [onRender function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onrender) | adds the [Preview Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports) in the designer toolbar and sets the corresponding click handler |
| onSave | [onSave function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsave) | adds the [Save Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onSaveAs | [onSaveAs function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsaveas) | adds the [Save As.. button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onOpenFileMenu | [onOpenFileMenu function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopenfilemenu) | adds the "File" menu in the designer toolbar and sets the corresponding click handler |
| report | [Report object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#report) | 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](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner) with `ViewChild` injection.

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