All docs
V21.2
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Property Binding in Angular

  • 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

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

Two-Way Property Binding

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

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

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:

<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:

<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