Using ActiveReportsJS Report Designer Component in Angular applications

Create Angular Application

The easiest and recommended way for creating a new Angular application is to use Angular CLI

ng new arjs-designer-app

Install ActivereportsJS

The report designer component is part of the @grapecity/activereports npm package. To install the current version, run the following command from the application's root folder.

npm install @grapecity/activereports

Alternatively, if using yarn:

yarn add @grapecity/activereports

Add the Report Designer Host component

Generate the new component that will host and display the report designer by running the following command from the root folder of the application

ng generate component DesignerHost

Add the div element that will host the report designer to src\app\designer-host\designer-host.component.html

<div id="designer-host"></div>

Add styles for the designer host element to src\app\designer-host\designer-host.component.css

#designer-host {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}

Add the code that initializes the designer component to src\app\designer-host\designer-host.component.ts

import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

@Component({
  selector: "app-designer-host",
  templateUrl: "./designer-host.component.html",
  styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit() {
    new ReportDesigner("#designer-host");
  }
}

Add DesignerHost component to the application

Replace the code of src\app\app.component.html with the following

<app-designer-host></app-designer-host>

Import required styles to src\styles.css

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

Run and test the application

Run the application using npm start or yarn start or ng serve commands. The ActiveReportsJS Designer component will appear on the start page of the application. Test the basic functionality by adding controls, setting their properties, creating the data source, et cetera. Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.