Progress® Telerik® Reporting R3 2017

How To: Use Angular Report Viewer with Angular CLI

This tutorial shows how to use Angular Report Viewer and will produce a new Angular application with settings similar to these of the local Angular demo project, installed by default under [TelerikReporting_InstallDir]\Examples\Angular\CLI.

Prerequisites

  • Review the Angular Report Viewer System 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 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>

Using Angular Report Viewer in Angular application

Tip Tip

All path/url links in the described steps should be adapted according to your project setup.

Steps:

  1. Create new Angular application using the Angular CLI tutorial.

  2. The Angular Report Viewer package requires the following peer dependencies:

    • @angular/common

    • @angular/core

    • rxjs

    • jquery

    To install jQuery use the following command:

    npm install jquery
  3. Add a reference to jQuery in the scripts array of the .angular-cli.json:

    JSON
    "scripts": [ "../node_modules/jquery/dist/jquery.js" ]
  4. The Telerik Angular Report Viewer package is published in the public NPM registry. To install the package, run:

    npm install @progress/telerik-angular-report-viewer
    Tip Tip

    If you receive a 403 Forbidden Error, first you need to register and login at npmjs.com.

    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: 'absolute',
        top: '5px',
        bottom: '5px',
        left: '5px',
        right: '5px',
        overflow: 'hidden',
        ['font-family']: 'ms sans serif'
      };
    }
  7. 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.

  8. Style the viewer using the desired Kendo UI theme:

    • When using Less-Based Themes:

      Add references to the CSS files in the <head> element of index.html:

      HTML
      <!-- The required Less-based styles -->                  
      <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
      <link href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.blueopal.min.css" rel="stylesheet" />

      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
    • When using Sass-Based Themes:

      Use pre-built CSS files or NPM packages as described in Getting the Sass-Based Themes. Then set the templateUrl of the report viewer to an HTML template specifically designed for use with the Sass-Based themes:

      HTML
      <tr-viewer 
          [containerStyle]="viewerContainerStyle"
          [serviceUrl]="'http://myrestserviceurl/api/reports'"
          [templateUrl]="'node_modules/@progress/telerik-angular-report-viewer/dist/dependencies/telerikReportViewerTemplate-sass.html'"
          [reportSource]="{
              report: 'Product Catalog.trdp',
              parameters: {}
          }"
          [viewMode]="'INTERACTIVE'"
          [scaleMode]="'SPECIFIC'"
          [scale]="1.0">
      </tr-viewer>
      Tip Tip

      You can use the assets array in .angular-cli.json to list files or folders you want to copy as-is when building your project. This approach can be used for the viewer's custom HTML template.

  9. Run the application:

    ng serve