Reporting for Angular

  • 2 minutes to read

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

View Example: ASP.NET Core Reporting - Best Practices (ASP.Net Core application with an Angular frontend)

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


Report Designer

Quick Start



Client-Side API

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

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 with information on ASP.NET Core client-side events:

For more information on Knockout bindings, review the following help topics:

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:



    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">



import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

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

    OnCustomizeExportOptions(event) {

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