Property Binding

• Mar 19, 2021
• 2 minutes to read

The Dashboard component for Angular uses options listed in the DashboardControlOptions class.

You can dynamically bind the control’s options.

One-Way Property Binding

Changes in workingModeProperty are propagated to the DashboardControl’s workingMode property, but not the other way:

View Example

app.component.html

<dx-dashboard-control [workingMode]="workingModeProperty"></dx-dashboard-control>

app.component.ts

export class AppComponent {
    workingModeProperty: string = "Designer";
}

Two-Way Property Binding

Changes in workingModeProperty are propagated to the DashboardControl’s workingMode property and vice versa:

app.component.html

<dx-dashboard-control [(workingMode)]="workingModeProperty"></dx-dashboard-control>

app.component.ts

export class AppComponent {
    workingModeProperty: string = "Designer";
}

You can also review the example that displays a dashboard in a pop-up window. The data-binding is used to update the dashboard’s ID, name, and information about pop-up visibility. When you click a button, the pop-up becomes visible and renders a dashboard with the specified ID:

View Example: How to display the Web Dashboard in a popup (Angular)

Tip

DevExtreme Documentation: Property Binding

Angular Documentation: Binding syntax: an overview

Properties of the Object Type

Use components with dxo- prefixes (“o” stands for “object”) to access extensions. The following example configures the Data Inspector extension’s options:

app.component.html

<dx-dashboard-control>
  <dxo-extensions>
    <dxo-data-inspector
        [allowInspectAggregatedData] = 'true'
        [allowInspectRawData] = 'true'>
    </dxo-data-inspector>
  </dxo-extensions>
</dx-dashboard-control>

Tip

See Also: Modify Extensions

Use the <dxo-ajax-remote-service> object to configure the DashboardControlOptions.ajaxRemoteService property. The following code sets the server’s URL and passes a custom Authorization header from the client:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  headers: { [key: string]: any } = { "Authorization": "AuthToken123" };
}

app.component.html

<dx-dashboard-control 
  endpoint='http://localhost:5000/api/dashboard'>
  <dxo-ajax-remote-service
      [headers] = "headers">
  </dxo-ajax-remote-service>
</dx-dashboard-control>

Tip

DevExtreme Documentation: Properties of the Object Type