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

Steps:

  1. Create new Angular application using the Angular CLI tutorial.
  2. 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
    
  3. Once installed, import the TelerikReportingModule in your application root module or standalone component:

    import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
    
    @Component({
        selector: 'app-root',
        standalone: true,
        imports: [TelerikReportingModule],
        templateUrl: './app.component.html',
        styleUrl: './app.component.scss'
    })
    
  4. Add the desired report viewer container styling using a property of the custom component class(in this example - AppComponent):

    export class AppComponent {
        viewerContainerStyle = {
            position: 'relative',
            width: '1000px',
            height: '800px',
            ['font-family']: 'ms sans serif'
        };
    }
    
  5. 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.

  6. Style the viewer using the desired Kendo UI Sass-Based Theme by adding references to the Sass-based CSS files in the <head> element of index.html:

    <link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.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
    
  7. Run the application:

    ng serve
    

See Also

In this article