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.

Prerequisites

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:

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

    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.

Steps:

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

    If your node_modules folder is not in the same directory as the angular.json file, adjust this path to that location.

  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 npmjs.com before performing this step.

    npm login --registry=https://registry.npmjs.org --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:

    <tr-viewer
        [containerStyle]="viewerContainerStyle"
        [serviceUrl]="'http://localhost/api/reports'"
        [reportSource]="{
            report: 'Product Catalog.trdp',
            parameters: {}
        }"
        [viewMode]="'INTERACTIVE'"
        [scaleMode]="'SPECIFIC'"
        [scale]="1.0">
    </tr-viewer>
    

    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="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" 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';
        @Component({
            encapsulation: ViewEncapsulation.None
    
  9. Run the application:

    ng serve
    

See Also

In this article