Progress® Telerik® Reporting R2 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]\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>

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

    Thus, it is required to install jQuery:

    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. Install Telerik Angular Report Viewer package. The package is published in the Progress NPM Registry. To set up your access, follow the steps in Progress NPM Registry Access. To install the package, run:

    npm install @progress/telerik-angular-report-viewer
  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. Add references to Telerik Kendo UI styles and desired Kendo UI theme in the <head> element of index.html:

    HTML
    <!-- the required Kendo 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" />
  9. Run the application:

    ng serve