Reporting for Angular

• Sep 18, 2020
• 2 minutes to read

Topics in this section describe how to create reporting applications based on the Angular framework.

Document Viewer

Quick Start

• Create an Angular Front-End Application with a Document Viewer
• Document Viewer Client-Side Configuration

Customization

• Customize the Document Viewer Toolbar
• Customize the Document Viewer Tab Panel
• Pass Parameters from the Client to a Report

Report Designer

Quick Start

• Create an Angular Front-End Application with a Report Designer
• Report Designer Client-Side Configuration

Print and Export

• Print and Export
• Print and Export without a Preview

Client-Side API

To access the client-side Reporting API in Angular applications, use the following objects:

• Document Viewer - the JSReportViewer class
• Report Designer - the JSReportDesigner class

To handle client-side events, use callbacks with the same name in the 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:

Angular

 

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 { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
import DevExpress from 'devexpress-reporting/dx-webdocumentviewer'

@Component({
// ...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    OnCustomizeExportOptions(event) {
        event.args.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}