Property Binding in Angular

• May 27, 2024
• 3 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: Dashboard for Angular - Configuration

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: Dashboard for Angular - Display the Web Dashboard in a popup

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.

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

Configure Headers

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

app.component.html

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

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" };
}

View Example: Dashboard for ASP.NET Core - How to implement authentication

Tip

DevExtreme Documentation: Properties of the Object Type

Example

The following code snippets show how to configure the Web Dashboard control options in the client application:

app.component.html

<dx-dashboard-control style="display: block;width:100%;height:calc(100% - 35px);" 
  endpoint="http://localhost:5000/api/dashboard"
  workingMode="Designer"
  [loadDefaultDashboard]="false"
  (onBeforeRender)="onBeforeRender($event)">
    <dxo-data-request-options itemDataLoadingMode="OnDemand"></dxo-data-request-options>
    <dxo-fetch-remote-service [beforeSend]="beforeSend"></dxo-fetch-remote-service>
    <dxo-extensions>
      <dxo-viewer-api [onItemWidgetOptionsPrepared]="onItemWidgetOptionsPrepared" 
                      [onItemCaptionToolbarUpdated]="onItemCaptionToolbarUpdated">
      </dxo-viewer-api>
      <dxo-data-inspector [allowInspectAggregatedData]="true" [allowInspectRawData]="true"></dxo-data-inspector>
      <dxo-dashboard-export [allowExportDashboardItems]="false"></dxo-dashboard-export>
      <dxo-data-source-wizard [enableCustomSql]="true" [allowCreateNewJsonConnection]="true"
        [wizardSettings]="{ enableOlapDataSource: false, enableFederationDataSource: false }"></dxo-data-source-wizard>
    </dxo-extensions>
</dx-dashboard-control>

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { DashboardPanelExtension, DashboardControlArgs, ItemWidgetOptionEventArgs, ItemCaptionToolbarUpdatedEventArgs } from 'devexpress-dashboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dashboard-angular-app';

  onBeforeRender(e: DashboardControlArgs) {
    console.log("onBeforeRender");
  }

  onItemCaptionToolbarUpdated(e: ItemCaptionToolbarUpdatedEventArgs) {
    console.log("onItemCaptionToolbarUpdated");
  }

  onItemWidgetOptionsPrepared(e: ItemWidgetOptionEventArgs) {
    console.log("onItemWidgetOptionsPrepared");
  }

  beforeSend(settings: RequestInit) {
    console.log("beforeSend");
  }
}

The snippet configures the following DashboardControlOptions:

• The initial workingMode is set to Designer.
• The loadDefaultDashboard is set to false.
• The onBeforeRender event is handled.
• The ItemDataLoadingMode property is set to OnDemand.
• The beforeSend callback allows you to specify options for the Fetch request.
• The following extensions are configured:
  • The ViewerApiExtension extension is used to handle onItemWidgetOptionsPrepared and onItemCaptionToolbarUpdated events.
  • The Data Inspector’s allowInspectAggregatedData and allowInspectRawData properties are set to true.
  • The DashboardExportExtension‘s allowExportDashboardItems property is set to false.
  • The DataSourceWizardExtension‘s enableCustomSql and allowCreateNewJsonConnection are set to true. The wizardSettings property is used to set enableFederationDataSource and enableOlapDataSource properties to false (hides the OLAP and Data Federation options from the Data Source Wizard).