Integrating the Native Angular Report Viewer in a Standalone Component

This tutorial demonstrates how to add the native Angular Report Viewer component to a new Angular application that uses the Standalone Components approach which was made enabled by default for new Angular applications starting with the Angular 17 release.

Prerequisites

The following list describes the prerequisites for completing the tutorial:

• Review the Native Angular Report Viewer Requirements.
• Angular CLI Project.
• A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

Steps:

1. Create a new Angular application using the Angular CLI.

2. Enable Angular Animations in the project by following the Enabling the animations module article. For example, the provideAnimations function can be invoked in the bootstrapApplication function call in app.config.ts:

   import { ApplicationConfig } from '@angular/core';
   import { provideRouter } from '@angular/router';
   import { routes } from './app.routes';
   import { provideAnimations } from '@angular/platform-browser/animations';
   
   export const appConfig: ApplicationConfig = {
       providers: [provideRouter(routes), provideAnimations()]
   };
   

3. Install the Native Angular Report Viewer NPM package with the following command:

   npm install @progress/telerik-angular-native-report-viewer
   

   If you receive a 403 Forbidden Error, you need to register and log in at npmjs.com before performing this step.

   npm login --registry=https://registry.npmjs.org --scope=@progress
   

4. Once installed, import the ReportingAngularViewerModule in one of your standalone components of choice - Importing in Standalone components:

   import { Component, ViewChild } from '@angular/core';
   import { RouterOutlet } from '@angular/router';
   import { ReportingAngularViewerComponent, ReportingAngularViewerModule } from '@progress/telerik-angular-native-report-viewer'
   
   @Component({
       selector: 'app-root',
       standalone: true,
       imports: [RouterOutlet, ReportingAngularViewerModule],
       templateUrl: './app.component.html',
       styleUrl: './app.component.scss'
       })
       export class AppComponent {
       title = 'Native Angular Report Viewer Demo';
   
       @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
   }
   

5. Use the report viewer selector - reporting-angular-viewer in the component's template:

   <reporting-angular-viewer
       #report
       [reportSource]="{
           report: 'Report Catalog.trdx',
           parameters: {}
       }"
       serviceUrl="https://demos.telerik.com/reporting/api/reports"
       viewMode="interactive"
       [keepClientAlive]="true">
   </reporting-angular-viewer>
   

6. Install the Angular localize package - Add the localize package. This is required for the report viewer's localization functionality

   ng add @angular/localize
   

7. Install one of the Kendo UI for Angular themes, e.g. the Default Theme

   npm install --save @progress/kendo-theme-default
   

8. Reference the theme in the project using one of the supported approaches - Compiling Themes from SCSS Source Files. In this example, we will use the approach with the angular.json configuration which consists of adding the desired theme inside the styles array - Angular workspace configuration: Styles and scripts configuration:

   "styles": [
       "src/styles.scss",
       "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
   ],
   

9. Run the application start script:

   npm run start
   

See Also

• Angular CLI
• Native Angular Report Viewer Requirements
• Enabling CORS for the Reporting REST Service
• Native Angular Report Viewer Options
• Native Angular Report Viewer Commands
• Native Angular Report Viewer Events