New to Telerik Reporting? Download free 30-day trial

Integrating the Angular Report Viewer with 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.

Prerequisites

The following list describes the prerequisites for this tutorial:

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 alternate location.

    1. 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
    
    1. Once installed, import the TelerikReportingModule in your application root module :

      import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
      ...
      imports: [TelerikReportingModule]
      
    2. 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'
          };
      }
      
    3. Use the report viewer selector in the AppComponent template:

      <tr-viewer
          [containerStyle]="viewerContainerStyle"
          [reportServer]="{
              url: 'http://localhost:83/',
              username: 'myusername',
              password: 'mypass'
          }"
          [reportSource]="{
              report: 'Samples/Dashboard',
              parameters: {}
          }" 
          [viewMode]="'INTERACTIVE'"
          [scaleMode]="'SPECIFIC'"
          [scale]="1.0">
      </tr-viewer>
      

      For all available report viewer options refer to Options.

    4. 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
      
    5. Run the application:

      ng serve
      

    See Also

In this article