# Get Started with ActiveReportsJS Report Viewer Angular Component

Learn how to integrate ActiveReportsJS Report Viewer Angular component to the Angular 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-viewer-app --defaults --no-standalone
```

## Install ActiveReportsJS npm packages
The Angular Viewer Component is distributed via the [@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 Viewer Component Styles](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes#built-in-themes)

```css
@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.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. It registers the [ActiveReportsModule](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component#activereportsjs-angular-module) module in addition to the standard modules.

```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.
Create a new file called `report.rdlx-json` in the `public` folder and insert the following JSON content into that file.

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

## Add ActivereportsJS Angular Report Viewer to the application

> 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 `src/app/app.ts` and replace its content with the following code. The template of the component uses the [Angular Report Viewer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component). The handler of its `init` event opens the `report.rdlx-json` that you created on the previous step. The component also injects the [ActiveReportsJS Angular Export Services](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component#activereportjs-export-services) enabling the export functionality. 

```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="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></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 {
  @ViewChild(ViewerComponent, { static: false }) reportViewer!: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('report.rdlx-json');
  }  
}
```

Open `src/app/app.css` file and add style for the `viewer-host` element

```css
#viewer-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.
When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display a report with the text `Hello, ActiveReportsJS Viewer`. You can test the basic functionality by using the buttons on the toolbar or exporting the report to one of the available formats.

## Related links

* [Live Demo](/activereportsjs/demos/features/viewer-integration/angular)
* [Angular Developer Guide](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component)