ContextQMD
Back to Devexpress

Property Binding in Angular

dashboard-402095-web-dashboard-integrate-dashboard-component-dashboard-component-for-angular-property-binding.md

latest9.5 KB
Original Source

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

html
<dx-dashboard-control [workingMode]="workingModeProperty"></dx-dashboard-control>
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:

html
<dx-dashboard-control [(workingMode)]="workingModeProperty"></dx-dashboard-control>
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:

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:

html
<dx-dashboard-control 
  endpoint='http://localhost:5000/api/dashboard'>
  <dxo-fetch-remote-service
      [headers] = "headers">
  </dxo-fetch-remote-service>
</dx-dashboard-control>
typescript
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:

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