Angular Diagram - Advanced Data Binding

The Diagram component accepts functions as expression property values. It allows you to implement custom logic when you bind a diagram to a data source.

In this demo, the nodes and edges collections are bound to a data source. Custom functions are used to get different shape types and font styles for items based on additional data source information.

The autoLayout property specifies an auto-layout algorithm type and orientation that the component uses to build diagrams.

Backend API

<dx-diagram #diagram id="diagram"> <dxo-diagram-nodes [dataSource]="orgItemsDataSource" keyExpr="ID" [typeExpr]="itemTypeExpr" textExpr="Name" [widthExpr]="itemWidthExpr" [heightExpr]="itemHeightExpr" [textStyleExpr]="itemTextStyleExpr" [styleExpr]="itemStyleExpr" > <dxo-diagram-auto-layout type="tree" orientation="horizontal" ></dxo-diagram-auto-layout> </dxo-diagram-nodes> <dxo-diagram-edges [dataSource]="orgLinksDataSource" keyExpr="ID" fromExpr="From" toExpr="To" [styleExpr]="linkStyleExpr" [fromLineEndExpr]="linkFromLineEndExpr" [toLineEndExpr]="linkToLineEndExpr" ></dxo-diagram-edges> <dxo-diagram-toolbox> <dxi-diagram-group category="general" title="General"></dxi-diagram-group> </dxo-diagram-toolbox> </dx-diagram>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { provideHttpClient, withFetch } from '@angular/common/http'; import { DxDiagramModule } from 'devextreme-angular'; import { ArrayStore } from 'devextreme-angular/common/data'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxDiagramModule, ], }) export class AppComponent { orgItemsDataSource: ArrayStore; orgLinksDataSource: ArrayStore; constructor(service: Service) { this.orgItemsDataSource = new ArrayStore({ key: 'ID', data: service.getOrgItems(), }); this.orgLinksDataSource = new ArrayStore({ key: 'ID', data: service.getOrgLinks(), }); } itemTypeExpr(obj, value) { if (value) { obj.Type = (value === 'rectangle') ? undefined : 'group'; return null; } return obj.Type === 'group' ? 'ellipse' : 'rectangle'; } itemWidthExpr(obj, value) { if (value) { obj.Width = value; return null; } return obj.Width || (obj.Type === 'group' && 1.5) || 1; } itemHeightExpr(obj, value) { if (value) { obj.Height = value; return null; } return obj.Height || (obj.Type === 'group' && 1) || 0.75; } itemTextStyleExpr(obj) { if (obj.Level === 'senior') { return { 'font-weight': 'bold', 'text-decoration': 'underline' }; } return {}; } itemStyleExpr(obj) { const style: Record<string, string> = { stroke: '#444444' }; if (obj.Type === 'group') { style.fill = '#f3f3f3'; } return style; } linkStyleExpr() { return { stroke: '#444444' }; } linkFromLineEndExpr() { return 'none'; } linkToLineEndExpr() { return 'none'; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), provideHttpClient(withFetch()), ], });

::ng-deep #diagram { height: 900px; }

import { Injectable } from '@angular/core'; export class OrgItem { ID: string; Name: string; Type?: string; Level?: string; } export class OrgLink { ID: string; From: string; To: string; } const orgItems: OrgItem[] = [ { ID: '106', Name: 'Development', Type: 'group', }, { ID: '107', Name: 'WinForms\nTeam', Type: 'group', }, { ID: '108', Name: 'WPF\nTeam', Type: 'group', }, { ID: '109', Name: 'Javascript\nTeam', Type: 'group', }, { ID: '110', Name: 'ASP.NET\nTeam', Type: 'group', }, { ID: '112', Name: 'Ana\nTrujillo', Level: 'senior', }, { ID: '113', Name: 'Antonio\nMoreno', }, { ID: '115', Name: 'Christina\nBerglund', }, { ID: '116', Name: 'Hanna\nMoos', }, { ID: '119', Name: 'Laurence\nLebihan', }, { ID: '120', Name: 'Elizabeth\nLincoln', Level: 'senior', }, { ID: '122', Name: 'Patricio\nSimpson', Level: 'senior', }, { ID: '123', Name: 'Francisco\nChang', }, ]; const orgLinks: OrgLink[] = [ { ID: '124', From: '106', To: '108', }, { ID: '125', From: '106', To: '109', }, { ID: '126', From: '106', To: '107', }, { ID: '127', From: '106', To: '110', }, { ID: '129', From: '110', To: '112', }, { ID: '130', From: '110', To: '113', }, { ID: '132', From: '107', To: '115', }, { ID: '133', From: '107', To: '116', }, { ID: '136', From: '108', To: '119', }, { ID: '137', From: '108', To: '120', }, { ID: '139', From: '109', To: '122', }, { ID: '140', From: '109', To: '123', }, ]; @Injectable() export class Service { getOrgItems() { return orgItems; } getOrgLinks() { return orgLinks; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-diagram.min.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>