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:
- Create a new Angular application using the Angular CLI.
-
Enable Angular Animations in the project by following the Enabling the animations module article. For example, the
provideAnimations
function can be invoked in thebootstrapApplication
function call inapp.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()] };
-
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
-
Once installed,
import
theReportingAngularViewerModule
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; }
-
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>
-
Install the Angular
localize
package - Add the localize package. This is required for the report viewer's localization functionalityng add @angular/localize
-
Install one of the Kendo UI for Angular themes, e.g. the Default Theme
npm install --save @progress/kendo-theme-default
-
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 thestyles
array - Angular workspace configuration: Styles and scripts configuration:"styles": [ "src/styles.scss", "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss" ],
-
Run the application
start
script:npm run start