How to Use Angular Wrapper Report Viewer with Report Server for .NET

The article explains how to set up the Angular Wrapper Report Viewer to work with the Telerik Report Server for .NET.

The user account that will authenticate with the Report Server may be any User, including the Guest User, provided there is an enabled Token in its Tokens collection.

Prerequisites

Review the Angular Wrapper Report Viewer Requirements.
Installed and running Telerik Report Server for .NET.
Report Server for .NET's User that will connect from the viewer should have at least one enabled Token.
Report Server for .NET should contain at least one report that can be accessed by the User account.

Steps

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

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

In the class of the component(e.g. AppComponent) where the viewer will be displayed, define a viewerContainerStyle object property that will be used to set the container styling:

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

In the same component class, define a reportSource object property specifying the category and the name of the report that will be displayed. For example, if the category is Samples and the report is Dashboard, the syntax will look as follows:
```
reportSource = {
    report: 'Samples/Dashboard',
    parameters: {}
}
```
In the same component class, define a reportServer object property with a url string pointing to the Report Server for .NET, and a getPersonalAccessToken callback, which will be executed when the report viewer requests from the server to render the report.
```
reportServer = { 
    url: 'http://dnikolovlap:81/',
    getPersonalAccessToken: () => fetch('/rs-token').then(response => response.text())
}
```
In this example, the getPersonalAccessToken callback makes a request to a /rs-token endpoint that returns the token used to authorize access to using the Report Server for .NET REST API.

This is the recommended approach, but if an endpoint cannot be exposed, the token can be hardcoded in the callback: getPersonalAccessToken: () => Promise.resolve('TOKEN_STRING')
In the HTML template of the component, define the <tr-viewer> element, and pass the defined properties to their corresponding properties of the Angular Wrapper Report Viewer:
```
<tr-viewer
    [containerStyle]="viewerContainerStyle"
    [reportServer]="reportServer"
    [reportSource]="reportSource" >
</tr-viewer>
```
Run the application:
```
ng serve
```

How to Use Angular Wrapper Report Viewer with Report Server for .NET

Prerequisites

Steps

See Also

Getting Started

Support Resources

Community