How to change node and connector shape of the Angular Diagram dynamically?

This article explains how to change the node and connector shape of the Angular Diagram. To dynamically alter the shape of nodes or connectors in the Syncfusion® Angular Diagram, utilize the shape and type properties of the node or connector.

Changing the shape and type of nodes:

1. Select the node you want to modify.
2. Retrieve the selected node from the selectedItems.nodes collection in the diagram.
3. Modify the “shape” property of the node to the desired shape. For example, to transform a rectangle into an ellipse, set the “shape” property to “ellipse.”
4. Adjust the “type” property of the node to change the type of the shape.
5. To apply the changes, call the dataBind() method on the diagram.

Code-Snippet:

In your HTML file, create a button to facilitate the dynamic change of node shape and type.

<input type="button" id="changeShape" value="changeShape" (click)="changeShape()"/>

Implement a method to manage the dynamic change of node shape. This method can be invoked by clicking the button.

 public changeShape() {
   if (this.diagram.selectedItems.nodes.length > 0) {
     this.diagram.selectedItems.nodes[0].shape = {
       type: 'Flow',
       shape: 'Decision',
     };
     this.diagram.dataBind();
   }
 }

Changing the connector type:

1. Select the connector you want to modify.
2. Retrieve the selected connector from the selectedItems.connectors collection in the diagram.
3. Modify the “type” property of the connector. For example, switch from “Straight” to “Orthogonal” or vice versa.
4. To apply the changes, invoke the dataBind() method on the diagram.

Code-Snippet:

In your HTML file, create a button to facilitate the dynamic change of the connector type.

<input type="button" id="changeConnectortype" value="changeConnectortype" (click)="changeConnectorType()" />

Implement a method to manage the dynamic change of connector type. This method can be invoked by clicking the button.

 public changeConnectorType() {
   if (this.diagram.selectedItems.connectors.length > 0) {
     if (this.diagram.selectedItems.connectors[0].type === 'Orthogonal') {
       this.diagram.selectedItems.connectors[0].type = 'Straight';
     } else {
       this.diagram.selectedItems.connectors[0].type = 'Orthogonal';
     }
     this.diagram.dataBind();
   }
 }

Sample:

Refer to the working sample for additional details and implementation: Click here for sample

Conclusion

We hope you enjoyed learning about how to change node and connector shape of the Angular Diagram dynamically.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!