New to Telerik Reporting? Download free 30-day trial

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:

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

In this article