Angular Report Viewer Overview

The current Angular Report Viewer version is 26.25.521 and should be used with Reporting REST Service 19.1.25.521 or Telerik Report Server 11.1.25.521.

Integrate the Angular Report Viewer component in your Angular Reporting applications regardless of the module loader that you use.

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 16+ 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 so that its routes are accessible from the Angular application.

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: "16 - 19"
   • @angular/core: "16 - 19"
   • "jquery": "^1.10.0 || ^2.2.0 || ^3.7.0"

5. Required references to Telerik Kendo UI styles:

   • Kendo UI Sass-Based Themes v10.2.0

Browser Support

The Angular viewer is based on the HTML5 Report Viewer, thus it has the same Browser Support as the HTML5 Report Viewer.

Types of Reports

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

Report definitions created in run-time, fetched from custom storage, 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 Area provides an intuitive UI for user interactions. The HTML5-based Report Viewers use Kendo UI widgets for parameter editors out-of-the-box. Based on the type of the report parameter, a suitable editor UI is created.

List of the default widgets for different report parameters' types:

• DateTime: Kendo UI DatePicker widget. Even though the time part cannot be selected via the Kendo UI DatePicker widget UI it is still passed to the report engine as a default time part (12:00:00 AM) with the DateTime value. If needed, the viewer can be customized to use a Kendo UI DateTimePicker or another widget which allows selecting the time part explicitly. When a DateTime value is selected in the parameters area of the HTML5 Report Viewer it is interpreted as UTC DateTime on the server where the report is processed and rendered. For example, entering 1/1/2000 12:00:00 AM in a DateTimePicker report parameter widget and rendering the report will result in the following DateTime value on the server and in the rendered report - 1/1/2000 12:00:00 AM considered as a UTC time.
• Integer | Float | String: Kendo UI ListView widget. The default editor could be easily changed to Kendo UI ComboBox (for single select parameters) and Kendo UI MultiSelect (for multi-select parameters) editors. For more information, check parameters option in Report Viewer Initialization article.

When one or more report parameters have their Visible property turned on, a parameter area is shown as part of the report viewer. This helps the report developer to easily provide input methods for the end users. Based on the type of parameters, a suitable editor UI is created. 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. The end user can enter or select values in the editors.

When one or more visible report parameters have the AutoRefresh property turned off a Preview button appears. In this case, to preview the report, the end user can 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.

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
• Native Angular Report Viewer