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:

  • XML

  <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:

  • JSON

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

   • powershell

   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):

   • TypeScript

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

   • powershell

   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.

   • powershell

   npm login --registry=https://registry.npmjs.org --scope=@progress

5. Once installed, import the TelerikReportingModule in your application root module:

   • TypeScript

   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:

   • TypeScript

   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:

   • HTML

   <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:

   • 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:

   • TypeScript

   import { Component, ViewEncapsulation } from '@angular/core';
       @Component({
           encapsulation: ViewEncapsulation.None

9. Run the application:

   • powershell

   ng serve