Back to Devexpress

Access a DashboardControl Instance in Angular

dashboard-402263-web-dashboard-integrate-dashboard-component-dashboard-component-for-angular-access-a-dashboard-control-instance.md

latest1.4 KB
Original Source

Access a DashboardControl Instance in Angular

  • Feb 27, 2023

The sample below shows how you can access properties and call methods of a DashboardControl in an Angular application.

Pass a component name or a template reference variable to the @ViewChild decorator. Then use the component’s instance property to access the underlying DashboardControl and its members.

typescript
import { Component, ViewChild } from "@angular/core";
import { DxDashboardControlComponent } from 'devexpress-dashboard-angular';
// ...
export class AppComponent {
    // ===== Pass a component name =====
    @ViewChild(DxDashboardControlComponent, { static: false }) dashboardComponent: DxDashboardControlComponent
    // ===== or use a template reference variable =====
    @ViewChild("targetDashboardControl", { static: false }) dashboardComponent: DxDashboardControlComponent

    reloadData() {
        this.dashboardComponent.instance.reloadData();
    }

}
html
<dx-dashboard-control #targetDashboardControl
  style="display: block;width:100%;height:800px;" 
  endpoint="https://demos.devexpress.com/services/dashboard/api">
</dx-dashboard-control>
<dx-button text="Reload data" (onClick)="reloadData()"></dx-button>