Angular Report Viewer Overview

The current Angular Report Viewer version is 24.24.1218 and should be used with Reporting REST Service 18.3.24.1218 or Telerik Report Server 10.3.24.1218.

Integrate the Angular Report Viewer component in your Angular Reporting applications regardless of the module loader that you use (WebPack or SystemJS).

Check out also the Native Angular Report Viewer built on the top of Telerik UI for Angular components.

The Angular component is built on top of the HTML5 Report Viewer, which is the base for other Web-technologies report viewers as well.

Requirements

To successfully integrate the Angular Report Viewer component, ensure the following are fulfilled in your Angular Reporting application:

1. Required Application Version:

   • Angular 15+ Application

2. Required Service:

   • The viewer requires a running instance of Telerik Reporting REST Services in order to display reports. Make sure to enable Cross-Origin Requests (CORS) in the REST Service project.

3. Required JavaScript libraries:

   • Node.js - The required version will depend on the version of the Angular project - Angular versions under active support

4. The Angular Report Viewer package requires the following peer dependencies:

   • @angular/common: ">=15.0.0"
   • @angular/core: ">=15.0.0"
   • "jquery": "^1.10.0 || ^2.2.0 || ^3.7.0"

5. Required references to Telerik Kendo UI styles:

   • Less-Based Themes
   • Sass-Based Themes

Browser Support

The Angular viewer is based on the HTML5 Report Viewer, thus the client browser should conform to the HTML5 Report Viewer Browser Support.

Types of Reports

The Angular Report Viewer can display both declarative and type report definitions#report-definition). All report definitions should be accessible server-side by the Reporting REST Service.

Report definitions created in run-time, fetched from custom storages, etc. may also be displayed in the viewer. This requires a Custom IReportSourceResolver associating the client-side ReportSource Report property with the server-side ReportSource passed to the Reporting engine.

Preview, Export, Print, and Share Reports

The Angular Report Viewer enables users to Preview, Export, and Print their reports from your Angular Reporting application. The functionalities are triggered from the corresponding Toolbar Menu buttons.

The Send Mail Message functionality gives the option to share the previewed report documents with anyone.

Report Parameters

The parameters pane provides an intuitive UI for user input. The HTML5-based Angular Report Viewer uses Kendo UI widgets for its default parameter editors, creating a suitable editor UI based on the type of the parameter.

The parameters area is shown when at least one report parameter has its Visible property set to True. The parameter layout on the parameter area is formatted automatically. The order is determined by the order in which parameters appear in the ReportParameters collection editor.

When at least one visible report parameter has the AutoRefresh property turned off a Preview button appears. In this case, to preview the report, the end user should click the Preview button. If all parameters have default values, the report runs automatically on the first view. You can show or hide the parameters area from the Parameters button in the report viewer’s toolbar.

For more details, visit the Report Parameters section of the HTML5 Viewer Overview article.

Localization

The Angular Report Viewer may be localized with the mechanism provided by the HTML5 Report Viewer that it wraps. Details may be found in the dedicated article Angular Report Viewer Localization.

API

The Angular Report Viewer exposes the following client APIs:

• Options
• Properties
• Methods
• Events

See Also

• How to Use Angular Report Viewer with Angular CLI
• How to Use Angular Report Viewer with SystemJS
• Native Angular Report Viewer