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:

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

Using Angular Report Viewer in Angular application

All paths and url links in the described steps must be adapted according to your project setup.

Steps:

Create new Angular application using the Angular CLI tutorial.
Install jQuery by using the following command:
```
npm install jquery
```
Add a reference to jQuery in the scripts array of the angular-cli.json (as of Angular 6 the file is renamed to angular.json):
```
"scripts": ["./node_modules/jquery/dist/jquery.js"]
```
If your node_modules folder is not in the same directory as the angular.json file, adjust this path to that alternate location.
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 :

import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
...
imports: [TelerikReportingModule]

Add the desired report viewer container style using a property of the AppComponent class:

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"
    [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 theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the <head> element of index.html:
```

<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.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 Report Server

Prerequisites

Using Angular Report Viewer in Angular application

Steps:

See Also

Getting Started

Support Resources

Community