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

Integrating the Native Angular Report Viewer with the Reporting Service

This tutorial demonstrates how to add the native Angular Report Viewer component to a new Angular application.

Prerequisites

The following list describes the prerequisites for completing the tutorial:

Review the Native Angular Report Viewer Requirements.
Angular CLI Project.
A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

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:

TypeScript

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

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

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

HTML

<reporting-angular-viewer
	#report
	[reportSource]="{
		report: 'Report Catalog.trdx',
		parameters: {}
	}"
	serviceUrl="https://demos.telerik.com/reporting/api/reports"
	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 Reporting Service

Prerequisites

Steps:

See Also