Learn how to add ports to nodes in the Angular Diagram component. This video demonstrates how to create ports programmatically and add, remove, and update ports at run time using an external button click. It also shows you how to add multiple ports and update the properties of ports dynamically. Finally, it shows how to customize the appearance and position of the ports and how to connect nodes using ports.
The Angular Diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It lets users create flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface.
The Angular Diagram provides support to define custom ports for making connections. When a connector is set between two nodes, its end points are automatically docked to the nodes’ nearest boundary. Ports act as the connection points of the node and allow us to create connections with only those specific points. To add a connection port, define the port object and add it to the node ports collection. The offset property of the port accepts an object of fractions and is used to determine its position.
You can add and remove ports at runtime by using the client-side methods addPorts and removePorts. The shape of a port can be changed by using its shape property. If you need to render a custom shape, you can set the shape as a path and define the path using the pathData property of the port. The appearance of ports can be customized by using the strokeColor, strokeWidth, and fill properties. Customize the port size using the width and height properties. The ports’ visibility property allows you to define when the port is visible.
Product overview: https://www.syncfusion.com/angular-components/angular-diagram
Tutorial videos: https://www.syncfusion.com/tutorial-videos
**Download an example from GitHub: **https://github.com/SyncfusionExamples/how-to-create-and-customize-ports-in-the-angular-diagram-component
Top comments (0)