Integrating the Angular Report Viewer with Angular CLI

This tutorial demonstrates how to add the Angular Report Viewer component to a new Angular application.

The app's settings are similar to the settings of the local Angular Report Viewer demo project installed by default under C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Examples\Angular\html5-angular-report-viewer-example.

Prerequisites

The following list describes the prerequisites for this tutorial:

Angular CLI.
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 C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Report Designer\Examples placed in the folder used by the UriReportSourceResolver in the Reporting REST service implementation.

Entry with the default connection string used by Telerik Reporting sample reports in the web.config/appsettings.json file of the project hosting the Reporting REST service.

XML-based configuration file:

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

JSON-based configuration file:

"ConnectionStrings": {
    //This connection string will use System.Data.SqlClient as data provider invariant name.
    //"Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"

    //This connection string explicitly states the data provider invariant name - mandatory for databases other than MSSQL Server.
    "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
        "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
        "providerName": "System.Data.SqlClient"
    }
}

Using Angular Report Viewer in Angular application

Steps:

Create new Angular application using the Angular CLI tutorial.
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
```

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'
})

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'
};
}

Use the report viewer selector in the AppComponent template:

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

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
```
Run the application:
```
ng serve
```

Integrating the Angular Report Viewer with Angular CLI

Prerequisites

Using Angular Report Viewer in Angular application

Steps:

See Also

Getting Started

Support Resources

Community