How to Add Extra Rectangle Box Under Layout Nodes in Angular Diagram?

In Syncfusion® Angular Diagram, you can dynamically add rectangle-shaped nodes during runtime by utilizing the add method. To create these nodes, the shape property is used, where the type is set to Basic and the shape is set to Rectangle. This allows you to add new rectangle nodes to the diagram at specific positions with custom spacing.

The following code snippet demonstrates how to add extra rectangle boxes below existing nodes during runtime

addnode() {
   let existingNodesCount: number = this.diagram.nodes.length;
   this.addedNode = [];
   for (let i = 0; i < existingNodesCount; i++) {
     const existingNode: NodeModel = this.diagram.nodes[i];

     // Calculate the position for the new nodes
     const xPos: number = existingNode.offsetX;
     const yPos: number = existingNode.offsetY + 32; // Adjust the vertical position as needed

     // Create the new nodes
     const newNode1: NodeModel = {
       id: 'node' + (existingNodesCount + i + 2),
       offsetX: xPos - 40, // Adjust the horizontal position as needed
       offsetY: yPos,
       width: 50,
       height: 10,
       shape: { type: 'Basic', shape: 'Rectangle' },
       annotations: [{ content: 'Node ' + (existingNodesCount + i + 1) }],
     };

     const newNode2: NodeModel = {
       id: 'node1' + (existingNodesCount + i + 2),
       offsetX: xPos + 40, // Adjust the horizontal position as needed
       offsetY: yPos,
       width: 50,
       height: 10,
       shape: { type: 'Basic', shape: 'Rectangle' },
       annotations: [{ content: 'Node ' + (existingNodesCount + i + 2) }],
     };

     // Add the new nodes to the diagram
     this.diagram.add(newNode1);
     this.diagram.add(newNode2);
     this.addedNode.push(newNode1, newNode2);
   }
 } 

The function adds new rectangle nodes below existing ones, using offsetX and offsetY to position them correctly.

Sample : Click here for sample

Conclusion
I hope you enjoyed learning how to add extra rectangle boxes under nodes at runtime in Angular diagram

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, Direct-Trac, or feedback portal. We are always happy to assist you!