New to Telerik Reporting? Download free 30-day trial

Integrating the Angular Report Viewer with the Report Server

This tutorial demonstrates how to add the Angular Report Viewer component to a new Angular application and display a report coming from the Telerik Report Server.


The following list describes the prerequisites for this tutorial:


  1. Create a new Angular application using the Angular CLI.
  2. 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 before performing this step.

    npm login --registry= --scope=@progress
  3. Once installed, import the ReportingAngularViewerModule in your application root module:

    import { ReportingAngularViewerModule } from '@progress/telerik-angular-native-report-viewer';
        declarations: [
        imports: [
        providers: [],
        bootstrap: [AppComponent]
  4. Use the report viewer selector - reporting-angular-viewer in the component's template:

            password: 'password'
            report: 'Samples/Invoice',
            parameters: {}
  5. Install the Angular localize package - Add the localize package. This is required for the report viewer's localization functionality

    ng add @angular/localize
  6. Install one of the Kendo UI for Angular themes, e.g. the Default Theme

    npm install --save @progress/kendo-theme-default
  7. 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": [
  8. Run the application start script

    npm run start

See Also

In this article