Progress® Telerik Native Report Viewer component for Angular

This package is part of Telerik Reporting.

Report authors now will be able to seamlessly implement report preview functionality using a native Angular report viewer control, so that the end-users get the best possible UX from perfectly blending UI controls when using Kendo UI for Angular and Telerik Reporting into an application. Leveraging the power of Angular, this viewer provides a responsive and dynamic reporting interface, ensuring an optimal user experience across various devices.

The viewer is built with Kendo UI for Angular components library and requires a valid Kendo UI for Angular or DevCraft license.

Telerik Native Angular Report Viewer provides the rich functionality of the rest of the Telerik Reporting Report Viewer implementations, without depending on jQuery library.

Major features:

• Preview Telerik Reports in desktop or mobile browsers.

• Browse the report pages on screen.

• Navigate through the history of visited reports.

• Use built-in interactivity features such as navigating to external URLs, other reports or bookmarks, performing drill-down actions, sorting by table columns, etc.

• Print or export the report to supported formats including PDF, Word, Excel, and PowerPoint.

• Use the viewer's API for customizing and extending its behavior.

Requirements

• NodeJS (Active LTS or Maintenance LTS versions).
• Kendo UI for Angular 17.2.0 or later.
• Angular 16.0 to 19.0.
• Running and accessible Telerik Report Server or Telerik Reporting REST Service 19.3.25.1119.

Add to an Angular project

1. Install the package using the -f flag - npm install -f @progress/telerik-angular-native-report-viewer
2. ng add the Angular localize package - Add the localize package.
3. import the ReportingAngularViewerModule in the application root module:
4. import a Kendo theme in the component's styles, e.g. Kendo UI Default - Styling & Themes - Overview - Kendo UI for Angular (telerik.com)
5. Now, the viewer can be rendered in your project's components through the reporting-angular-viewer selector:

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

Example

Telerik Reporting installer deploys a runnable project of Telerik Native Angular Report Viewer in folder %programfiles(x86)%\Progress\Telerik Reporting Rr YYYY\Examples\Angular\native-angular-report-viewer-example. Rr YYYY denotes the current release and year, e.g. 'R3 2023'.

License

IMPORTANT This is commercial software. You must agree to the Telerik End User License Agreement for Telerik Reporting and to the license agreements of its dependencies in order to use it.

If you do not own a commercial license, the use of this product and its Kendo UI for Angular dependency shall be governed by the respective trial licenses' terms.

Telerik Reporting and Kendo UI for Angular require activation using a license key — this applies to both the trial and commercial versions of the products.

You have two purchase options to obtain the necessary commercial licenses:

1. Telerik Reporting + Kendo UI.
2. Telerik DevCraft (Complete or Ultimate).

For more information on licensing, configuration, and troubleshooting, refer to the product documentation's License section.

Copyright © 2025 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.