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:

   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.

   npm login --registry=https://registry.npmjs.org --scope=@progress
   

3. 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]
   })
   

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

   <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

   ng add @angular/localize
   

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

   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:

   "styles": [
       "src/styles.scss",
       "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
   ],
   

8. Run the application start script

   npm run start
   

See Also

• Telerik Report Server
• Angular CLI
• Native Angular Report Viewer Requirements
• Native Angular Report Viewer Options
• Native Angular Report Viewer Commands
• Native Angular Report Viewer Events