# Using ActiveReportsJS Report Designer Component in Angular applications

Learn how to integrate the ActiveReportsJS Report Designer component into an Angular-based application.

## Content

## Create Angular Application

The easiest and recommended way for creating a new Angular application is to use [Angular CLI](https://angular.dev/cli). Run the following command from the command prompt or terminal to create an Angular application with default options. For details, see [options](https://angular.dev/cli/new) page of the Angular documentation.

```bash
ng new arjs-angular-designer-app --defaults --no-standalone
```

## Install ActivereportsJS npm packages

The Angular Report Designer Component is distributed via [@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) npm package, which depends on the core [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package. To install both, run:

```bash
npm install @mescius/activereportsjs-angular@latest
```

Or with Yarn:

```bash
yarn add @mescius/activereportsjs-angular@latest
```

## Import ActiveReportsJS styles

Open the `src/styles.css` file and add the following code.
It imports the default [Report Designer Component Styles](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes#built-in-themes)

```css
@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-designer.css";
```

## Register ActivereportsJS Angular module

> type=warning
> The following steps are applicable for Angular v20. If you are using an earlier version, the steps are similar, but the file names and structure may be slightly different.

Open the `src/app/app-module.ts` file and replace its content with the following code

```javascript
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActiveReportsModule } from '@mescius/activereportsjs-angular';
import { AppRoutingModule } from './app-routing-module';
import { App } from './app';

@NgModule({
  declarations: [
    App
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ActiveReportsModule
  ],
  providers: [
    provideBrowserGlobalErrorListeners()
  ],
  bootstrap: [App]
})
export class AppModule { }
```

## Add ActiveReportsJS report to the application

ActiveReportsJS uses [JSON format](https://www.json.org/json-en.html) and `rdlx-json` extension for report template files.
In the `public` folder, create the new file called `report.rdlx-json` and insert the following JSON content into that file.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

## Add ActivereportsJS Angular Report Designer to the application

> type=warning
> The following steps are applicable for Angular v20. If you are using an earlier version, the steps are similar, the file names and structure may be slightly different.

Open `src/app/app.ts` and replace its content with the following code. The template of the component uses the [Angular Report Designer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component). The designer component's input `report` property points to the `report.rdlx-json` that you created on the previous step.

```js
import { Component, ViewChild  } from '@angular/core';
import {
  AR_EXPORTS,
  HtmlExportService,
  PdfExportService,
  ViewerComponent,
  TabularDataExportService,
} from '@mescius/activereportsjs-angular';

@Component({
  selector: 'app-root',
  template: '<div id="designer-host"><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  standalone: false,
  styleUrl: './app.css',
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    },
  ],  
})
export class App {
  report = { id: 'report.rdlx-json', displayName: 'my report' };
}
```

Add styles for the designer host element to `src/app/app.css`

```css
#designer-host {
  width: 100%;
  height: 100vh;
}
```

## Run and test the application

Run the `npm start` or `yarn start` command to start the application and open the browser to the target URL.
The ActiveReportsJS Designer component will appear on the start page of the application and display the report design. Test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the [Developer Guide](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) and the [Online Demo](/activereportsjs/demos/features/designer-integration/angular) for more information on how to use the Report Designer component.