3. Add the ActiveReportsJS Angular module and report viewer to your application.

1) Open the src/app/app-module.ts file and replace its contents with the following code.

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 { }

2) Open the src/app/app.ts file and specify the component template as shown in the code below.

@Component({

  selector : 'app-root' ,

  template :

    '

standalone : false ,

  styleUrl : './app.css' ,

})

3) The Init event handler inside src/app/app.ts set above is set to open the generated report "report.rdlx-json".

* Please set the report name dynamically according to the previously created file.

export class AppComponent {

  @ViewChild(ViewerComponent, { static: false }) reportViewer! : ViewerComponent ;

onViewerInit() {

    this.reportViewer.open( 'report.rdlx-json' );

  }

}

4. Add styles to the viewer-host element.

Open the src/app/app.css file and add the CSS styles below.

#viewer-host {

 width: 100%;

 height: 100vh;

}

Please check the sample below for the full code.

5. Run the Angular app and check the results.

Run it using the npm start or yarn start, ng serve command.

npm start

For Angular developers

Recommended Tutorial for Beginners to ActiveReportsJS

Download a free trial

ActiveReportsJS Starter Template

Jump-start your development with customizable samples and templates.

Here are a variety of templates and samples utilizing ActiveReportsJS. You can view actual demos, download them, and customize them for your own use.

Key Features of Angular Reporting Control ActiveReportsJS