Angular Mat tree re-render performance issue takes too much time

Question

I am using mat-tree with very big data sets in child nodes on API call child having around 3k records and what I am doing is I'm updating the dataSource by adding the children from API under the dataSource and re rendering by

this.dataSource.data = updatedDataDource;

It is taking more than 15 seconds to re render and it is not acceptable.

Is there any way so that I can re render only that node and that associated children from api(I mean kind of partial rendering). Please help if any one have same issue.

Answer 1

Use *ngIf on subtrees rather than class.sub-tree-invisible for tree-select.

<ul [class.tree-invisible]="!treeControl.isExpanded(node)">

Change it to

<ul *ngif="treeControl.isExpanded(node)">

This will increase performance for the tree-select. This way, upon initial load, only the root nodes will have to be rendered in the DOM. Upon filtering, child nodes will have to be inserted that match the filter query which could be costly.