Angular: How to use Virtual Scroll with a Flat Tree?
While developing OctoPerf's frontend I quickly stumbled upon performance issues with Angular Material tree when too many nodes where opened. OctoPerf is a load testing solution. As such, it displays a tree of actions and containers used to script the load testing scenarios:
With hundreds of directories expanded, the frontend quickly became slow to the point of being unusable. By default, even nodes outside of the visible part of the tree are rendered in the DOM. Since this feature is not directly available yet, I had to switch from a classic CSS scrollbar to a Virtual Scroll manually. This blog post lists all the steps I had to follow in order to use a Virtual Scroll on a complex Material Tree.
Note:
The actions tree in octoPerf uses a
FlatTreeControl
to manage the data. It is probably quite harder (or even impossible) to use a Virtual Scroll with aNestedTreeControl
!