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:

1. Create a new Angular application using the Angular CLI.

2. 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

3. 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,
           BrowserAnimationsModule,
           AppRoutingModule,
           ReportingAngularViewerModule
       ],
       providers: [],
       bootstrap: [AppComponent]
   })

4. 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>

5. Install the Angular localize package - Add the localize package. This is required for the report viewer's localization functionality

   • powershell

   ng add @angular/localize

6. Install one of the Kendo UI for Angular themes, e.g. the Default Theme

   • powershell

   npm install --save @progress/kendo-theme-default

7. 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"
   ],

8. Run the application start script

   • powershell

   npm run start