Progress® Telerik® Reporting R3 2020

How to Use Angular Report Viewer with Angular CLI

This tutorial shows how to use Angular Report Viewer and will produce a new Angular application with settings similar to these of the local Angular demo project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\CLI.


  • Review the Angular Report Viewer Requirements.

  • Angular CLI.

  • A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

  • Copy of the "Product Catalog.trdp" report file from [TelerikReporting_InstallDir]\Report Designer\Examples in the folder used by the ReportFileResolver in the Reporting REST service implementation.

  • Entry with the default connection string used by Telerik Reporting sample reports in the web.config file of the project hosting the Reporting REST service:

       <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                  connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                  providerName="System.Data.SqlClient" />

Using Angular Report Viewer in Angular application

All path/url links in the described steps should be adapted according to your project setup.


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

  2. Install jQuery by using the following command:

    npm install jquery
  3. Add a reference to jQuery in the scripts array of the .angular-cli.json (as of Angular 6 the file is renamed to angular.json):

    "scripts": [ "../node_modules/jquery/dist/jquery.js" ]
  4. Install the Telerik Angular Report Viewer NPM package by running:

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

    If you receive a 403 Forbidden Error, first you need to register and login at

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

    import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
    imports: [TelerikReportingModule]
  6. Add the desired report viewer container style using a property of the AppComponent class:

    export class AppComponent {
      viewerContainerStyle = {
        position: 'relative',
        width: '1000px',
        height: '800px',
        ['font-family']: 'ms sans serif'
  7. Use the report viewer selector in the AppComponent template:

            report: 'Product Catalog.trdp',
            parameters: {}

    For all available report viewer options refer to Options.

  8. Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes):

    Add references to the Less-based CSS files in the <head> element of index.html:

    <!-- The required Less-based styles -->                  
    <link href="" rel="stylesheet" />
    <link href="" rel="stylesheet" />

    or to get the Sass-based Kendo UI themes, you can either use the pre-build CSS files or use the NPM packages (Getting the Sass-Based Themes).

    If you use the styleUrls attribute to reference the CSS it is required to set the view encapsulation to None:

    import { Component, ViewEncapsulation } from '@angular/core';
      encapsulation: ViewEncapsulation.None
  9. Run the application:

    ng serve
In this article
Not finding the help you need?