Angular Diagram - Tutorial Videos

See how easily you can create and configure the Angular Diagram component of Syncfusion. This video explains how to create, edit, and view interactive diagrams using the Syncfusion Angular Diagram component. You will see how to create nodes and add connectors to join those nodes. Also, you will see how to add segments and annotations for the connectors.

See how easily you can create and position an organization chart using the Syncfusion Angular Diagram component. This video explains how to add a JSON data source and map it to the Diagram component. You will see how to bind a remote data source and customize diagram nodes and connectors.

See how easily you can add and customize a symbol palette in the Syncfusion Angular Diagram component. This video explains how to customize the palette header. You will see how to restrict expansion of the palette panel and customize the size of the symbols.

Learn how to create and customize nodes in the Syncfusion Angular Diagram component. This video explains how to create a node programmatically and by using the drawing tool. It also explains how to create different types of node shapes like text, image, path, HTML template, and SVG elements.

Learn how to add and customize connectors in the Syncfusion Angular Diagram component. This video explains how to add a connector programmatically and using the drawing tool. It also explains how to add different types of connector segments and decorator shapes.

Learn how to add annotations to nodes and connectors in the Angular Diagram component. You will learn how to customize annotations using properties like horizontal alignment, vertical alignment, offset, and margin. Additionally, I will show you how to modify the appearance of annotations using text wrapping and font styles.

Learn how to group nodes and connectors in the Angular Diagram component. This video demonstrates how to group nodes programmatically and dynamically. It also shows how to update a node group and add annotations to it. Finally, it shows how to create a nested group.

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.

Learn how easily you can create a Mind Map Diagram layout using the Angular Diagram Component. This video explains how to customize the nodes and connectors in the layout. It also explains how to align the layout using horizontal spacing, vertical spacing, and layout margin properties. Additionally, it explains how to expand and collapse child nodes.

Learn how to save and export an Angular Diagram. This video demonstrates how to save and load an Angular Diagram as a string and file stream. It also shows you how to export a diagram in different file formats and print it.

Learn how to customize the Angular Diagram and its elements. This video demonstrates how to customize the diagram canvas page, insert page breaks, and display multiple pages on the canvas. It also shows you how to customize the appearance and position of nodes and connectors. Finally, it shows you how to bridge connectors.