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" };
- }
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.