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:

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

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

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

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

• Angular CLI
• Native Angular Report Viewer Requirements
• Enabling CORS for the Reporting REST Service
• Native Angular Report Viewer Options
• Native Angular Report Viewer Commands
• Native Angular Report Viewer Events