New to Telerik Reporting? Start a free 30-day trial

Integrating the Native Angular Report Viewer with the 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 Native Angular Report Viewer Requirements.
Angular CLI Project.
A running instance of the Telerik Report Server.

Steps:

Create a new Angular application using the Angular CLI.
Install the Native Angular Report Viewer NPM package with the following command:
powershell
```
npm install @progress/telerik-angular-native-report-viewer
```
If you receive a 403 Forbidden Error, you need to register and log in at npmjs.com before performing this step.
powershell
```
npm login --registry=https://registry.npmjs.org --scope=@progress
```

Once installed, import the ReportingAngularViewerModule in your application root module:

import { ReportingAngularViewerModule } from '@progress/telerik-angular-native-report-viewer';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ReportingAngularViewerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

Use the report viewer selector - reporting-angular-viewer in the component's template:

HTML

<reporting-angular-viewer
	serviceType="reportServer"
	[reportServer]="{
		url:'http://localhost:83/',
		username:'username',
		password: 'password'
	}"
	[reportSource]="{
		report: 'Samples/Invoice',
		parameters: {}
	}"
	viewMode="interactive"
	[keepClientAlive]="true">
</reporting-angular-viewer>

Install the Angular localize package - Add the localize package. This is required for the report viewer's localization functionality
powershell
```
ng add @angular/localize
```
Install one of the Kendo UI for Angular themes, e.g. the Default Theme
powershell
```
npm install --save @progress/kendo-theme-default
```
Reference the theme in the project using one of the supported approaches - Compiling Themes from SCSS Source Files. In this example, we will use the approach with the angular.json configuration which consists of adding the desired theme inside the styles array - Angular workspace configuration: Styles and scripts configuration:
JSON
```
"styles": [
	"src/styles.scss",
	"node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
],
```
Run the application start script
powershell
```
npm run start
```

Integrating the Native Angular Report Viewer with the Report Server

Prerequisites

Steps:

See Also