How to establish port to port connection without connecting to a node in Angular Diagram?

This article explains how to establish port-to-port connections without connecting to a node in an Angular diagram. To establish a port-to-port connection, initially create ports for all the nodes involved in Angular Diagram. If you wish to remove connections between nodes, you can achieve this by adjusting the InConnect and OutConnect constraints within the NodeConstraints.

Follow the steps below:

To remove inEdges for node:

To eliminate only the incoming edge connections for nodes, you can simply remove the InConnect constraints from the node’s constraints.

app.component.html

<ejs-diagram
 #diagram
 id="diagram"
 width="100%"
 height="700px"
  >
 <e-nodes>
   <e-node
     id="NewIdea"
     [width]="100"
     [height]="100"
     [offsetX]="200"
     [offsetY]="180"
     [shape]="terminator"
     [constraints]="nodeConstraints"
   >
   </e-node>
 </e-nodes>
</ejs-diagram>

app.component.ts

public nodeConstraints: NodeConstraints;
ngOnInit(): void {
this.nodeConstraints = NodeConstraints.Default & ~NodeConstraints.InConnect
}

To remove outEdges for node:

To remove only the outEdges connection for the nodes, you can remove the OutConnect constraints from the node constraints.

app.component.html

<ejs-diagram
 #diagram
 id="diagram"
 width="100%"
 height="700px"
  >
 <e-nodes>
   <e-node
     id="NewIdea"
     [width]="100"
     [height]="100"
     [offsetX]="200"
     [offsetY]="180"
     [shape]="terminator"
     [constraints]="nodeConstraints"
   >
   </e-node>
 </e-nodes>
</ejs-diagram>

app.component.ts

public nodeConstraints: NodeConstraints;
ngOnInit(): void {
this.nodeConstraints = NodeConstraints.Default & ~NodeConstraints.OutConnect
}

To remove node to node connection:

If you intend to remove the establishment of connections between nodes, it’s necessary to remove both the InConnect and OutConnect constraints from the node’s constraints.

app.component.html

<ejs-diagram
 #diagram
 id="diagram"
 width="100%"
 height="700px"
  >
 <e-nodes>
   <e-node
     id="NewIdea"
     [width]="100"
     [height]="100"
     [offsetX]="200"
     [offsetY]="180"
     [shape]="terminator"
     [constraints]="nodeConstraints"
   >
   </e-node>
 </e-nodes>
</ejs-diagram>

app.component.ts

public nodeConstraints: NodeConstraints;
ngOnInit(): void {
   this.nodeConstraints = NodeConstraints.Default & ~NodeConstraints.InConnect & ~ NodeConstraints.OutConnect;
}

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to establish port-to-port connections without connecting to a node 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 exampleto 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!