How to improve performance of expand and collapse in the layout of an Angular Diagram?

This article explains how to improve the performance of expand and collapse actions in the layout of the Syncfusion® Angular Diagram component. When working with diagrams that include a large number of nodes arranged in a layout, the performance of rendering can sometimes be affected during these interactions. To address this, it is essential to optimize the expand and collapse functionality, especially when dealing with complex or hierarchical structures. The Syncfusion® Angular Diagram component provides the ability to expand and collapse nodes within a layout dynamically.

   public nodeDefaults(obj: any): NodeModel {
       obj.shape = { type: 'Text', content: obj.data.Name,shape: 'Rectangle', cornerRadius: 5 };
   obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };
   obj.backgroundColor = '#659be5';
   obj.margin = { left: 5, right: 5, bottom: 5, top: 5 };
   obj.width = 80;
   obj.height = 30;
   obj.expandIcon = {
       shape: 'ArrowDown',
     };
     obj.collapseIcon = {
       shape: 'ArrowUp',    };
   return obj;
   }; 

While this feature is highly useful, enabling smooth and seamless rendering during these actions is crucial for an optimal user experience. One effective way to achieve this is by disabling animations during the expand and collapse operations. This can be done by setting the enableAnimation property of the layout to false.
By disabling the animation, the rendering process becomes faster and more efficient, eliminating any potential delays or flickering effects. This is particularly beneficial for applications that require quick interactions and need to maintain a high level of responsiveness even with extensive diagram layouts.

   public layout: Object = {
       type: 'HierarchicalTree',
           margin: { left: 10, top: 10 },
           horizontalSpacing: 40.0,
           verticalSpacing: 50.0,
           orientation: 'TopToBottom',
           enableAnimation: false
   }; 

By applying this configuration, you can ensure that the expand and collapse actions are executed efficiently, providing a smooth and consistent user experience while maintaining the performance of the diagram layout.

Please refer to the working sample for reference.
Sample

Conclusion
I hope you enjoyed learning how to improve performance of expand and collapse in the layout of an 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!