Handle Events

• May 27, 2024

Use the () syntax to handle an event and pass the $event object to listen the event.

The following code handles the onDashboardInitialized event and shows the dashboard identifier in a toast message:

app.component.html

<dx-dashboard-control 
    (onDashboardInitialized) = "onDashboardInitialized($event)"
>
</dx-dashboard-control>

app.component.ts

import { Component } from "@angular/core";
import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    onDashboardInitialized(args) {
        notify(args.dashboardId);
    }
}

In nested components, the () syntax cannot be used. Use the [] syntax instead.

The following code hides the CategoryName column from the Data Inspector‘s grid:

app.component.html

<dx-dashboard-control>
      <dxo-extensions>
        <dxo-data-inspector
            [onGridContentReady] = 'onGridContentReady'>
        </dxo-data-inspector>
    </dxo-extensions>
</dx-dashboard-control>

app.component.ts

export class AppComponent {
    onGridContentReady (args) {
        args.component.columnOption("CategoryName", "visible", false);
    }
}

Tip

DevExtreme Documentation: Event Handling

Angular Documentation: Event Binding