Reporting for Angular
- 2 minutes to read
The topics in this section describe how to create reporting applications based on the Angular framework.
DevExpress Web Reporting controls are composed of DevExtreme UI components. Angular versions supported by the DevExtreme Component Suite are listed in the following help topic: Supported Versions.
Document Viewer
Quick Start
- Create an Angular Application with a Document Viewer From Template
- Create an Angular Front-End Application with a Document Viewer
- Document Viewer Client-Side Configuration in Angular Application
Customization
- Customize the Document Viewer Toolbar in Angular Application
- Customize the Document Viewer Tab Panel in Angular Application
Specify Parameter Values in an Angular Reporting Application
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
Report Designer
Quick Start
- Create an Angular Application with a Report Designer From Template
- Create an Angular Front-End Application with a Report Designer
- Report Designer Client-Side Configuration in Angular Application
Customization
Print and Export
Localization
Client-Side API
Use the following objects to access the client-side Reporting API in Angular applications:
- Document Viewer - the JSReportViewer class
- Report Designer - the JSReportDesigner class
Client-side events in Angular are handled with callbacks specified in the Knockout bindings.
Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application. Review the following help topics, which contain information on ASP.NET Core client-side events:
For more information on Knockout bindings, review the following help topics:
- Document Viewer Client-Side Configuration (Knockout Bindings)
- Report Designer Client-Side Configuration (Knockout Bindings)
The following code snippet illustrates how to use the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:
report-viewer.html
<div>
<dx-report-viewer [reportUrl]="reportUrl" height="800px">
<dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
</dxrv-request-options>
<dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
</dxrv-callbacks>
</dx-report-viewer>
</div>
report-viewer.ts
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
@Component({
// ...
})
export class ReportViewerComponent {
@ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
reportUrl: string = "TestReport";
invokeAction: string = '/DXXRDV';
OnCustomizeExportOptions(event) {
event.args.HideFormat(ExportFormatID.XLS);
}
constructor(@Inject('BASE_URL') public hostUrl: string) { }
}