Angular Diagram - Default Shape and Connector Settings

The Diagram component allows you to specify default settings for its items in the following ways:

  • Specify settings contained in the defaultItemProperties property.
  • Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
app.component.html
app.component.ts
  • <dx-diagram #diagram id="diagram">
  • <dxo-default-item-properties connectorLineType="straight" style="stroke-width: 3px">
  • </dxo-default-item-properties>
  • <dxo-nodes ... [textStyleExpr]="textStyleExpr"></dxo-nodes>
  • <dxo-edges ... [styleExpr]="styleExpr"></dxo-edges>
  • </dx-diagram>
  • export class AppComponent {
  • //...
  • styleExpr(obj) {
  • return { "stroke": "red" };
  • }
  • textStyleExpr(obj) {
  • return { "fill": "green" };
  • }
  • }