Progress® Telerik® Reporting R3 2020

New to Telerik Reporting? Download free 30-day trial

How to Use Angular Report Viewer with SystemJS

This article demonstrates how to add the Angular Report Viewer component to an Angular application with a SystemJS module loader. It shows the steps to implement the required configuration when you use the Angular Quickstart project template. As a result, we create a new Angular application with settings similar to these of the local AngularDemo project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\SystemJS.

To use the Angular Report Viewer with SystemJS, you must explicitly list the package entry points.

Prerequisites

The following list describes the prerequisites for this tutorial:

  • Review the Angular Report Viewer Requirements.

  • 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]\ReportDesigner\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:

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

Clone Angular Quickstart

If you don't have an Angular 4 SystemJS application, clone the Angular Quickstart project into a local folder with the following command:

git clone https://github.com/angular/quickstart.git
cd quickstart
npm install

Add the Angular Report Viewer Package

All paths and url links in the described steps must be adapted to your project setup.

Steps:

  1. The Angular Report Viewer requires jQuery peer dependencies. To install it use the following command:

    npm install --save jquery
  2. The Telerik Angular Report Viewer package is published in the public NPM registry. To install the package, run:

    npm install --save @progress/telerik-angular-report-viewer
  3. Configure SystemJS

    The configuration file, which SystemJS uses, is in the project template under src/systemjs.config.js.

    To add the Angular Report Viewer and jQuery configuration to the map and packages section, use the following example:

    json
    map: {
      // ...
    
      '@progress': 'npm:@progress',
      '@telerik': 'npm:@telerik',
      'jquery': 'npm:jquery/dist/jquery.js',
    },
    packages: {
      // ...
    
    
      // Telerik Angular Report Viewer package
      '@progress/telerik-angular-report-viewer': {
        main: 'dist/cjs/main',
        format: 'cjs',
        defaultExtension: 'js'
      }
    }
  4. Import the TelerikReportingModule in your application root module:

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

    HTML
    <tr-viewer 
        [containerStyle]="viewerContainerStyle"
        [serviceUrl]="'http://myrestserviceurl/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.

  7. 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/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/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
  8. Run the application:

    npm run start
In this article
Not finding the help you need?