How to Use 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.
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"] -
Install the Telerik Angular Report Viewer NPM package by running:
npm install @progress/telerik-angular-report-viewerIf 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.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 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:<!-- The required Less-based styles --> <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