New to Telerik Reporting? Download free 30-day trial

Integrating the Angular Report Viewer with Angular CLI

This tutorial demonstrates how to add the Angular Report Viewer component to a new Angular application. The app's settings are similar to the settings of the local Angular demo project installed by default under [TelerikReporting_InstallDir]\Examples\Angular\CLI.


The following list describes the prerequisites for this tutorial:

  • 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 placed in the folder used by the UriReportSourceResolver in the Reporting REST service implementation.
  • Entry with the default connection string used by Telerik Reporting sample reports in the web.config/appsettings.json file of the project hosting the Reporting REST service.

    XML-based configuration file:

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

    JSON-based configuration file:

    "ConnectionStrings": {
        //This connection string will use System.Data.SqlClient as data provider invariant name.
        //"Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"
        //This connection string explicitly states the data provider invariant name - mandatory for databases other than MSSQL Server.
        "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
            "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
            "providerName": "System.Data.SqlClient"

Using Angular Report Viewer in Angular application

All paths and url links in the described steps must 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, you need to register and login at before performing this step.

    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" />

    To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files or 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

See Also

In this article