New to Telerik Reporting? Start a 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:

Angular CLI.
Review the Angular Report Viewer Requirements.
A running instance of the Telerik Report Server.

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:
powershell
```
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.
powershell
```
npm login --registry=https://registry.npmjs.org --scope=@progress
```

Once installed, import the TelerikReportingModule in your application root module or standalone component:

TypeScript

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

TypeScript

export class AppComponent {
	viewerContainerStyle = {
		position: 'relative',
		width: '1000px',
		height: '800px',
		['font-family']: 'ms sans serif'
	};
}

Use the report viewer selector in the AppComponent template:

HTML

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

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:
HTML
```
<link href="https://kendo.cdn.telerik.com/themes/12.3.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:
TypeScript
```
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None
```
Run the application:
powershell
```
ng serve
```

Integrating the Angular Report Viewer with Report Server

Prerequisites

Using Angular Report Viewer in Angular application

Steps:

See Also