Does the tree support virtualization?

[martypitt]

Hi

Curious if the tree component supports virtualization given a large number of top-level nodes?
If not, would it work to wrap the tui-tree within a material cdk-virtual-scroll-viewport?

[waterplea]

No, it doesn't support it, only lazy loading as shown in the example. Cdk virtual scroll will probably work for top level nodes, but it would be hard to calculate the height. You would need some custom scroll strategy. With OnPush components are pretty cheap, it's better to make infinite scroll rather than virtual, when you just load more items as you scroll and keep them in the DOM.

[martypitt]

@waterplea - thanks for the answer - onPush + infinite scroll is a great idea.

FWIW, I played about with Cdk Virual Scroll + experimental autosizing and it seemed to work ok so far (still early days).

For anyone hitting this, here's a rough template:

import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
@NgModule({
  imports: [ TuiTreeModule, ScrollingModule, ExperimentalScrollingModule],
  providers: [],
})

<cdk-virtual-scroll-viewport class="viewport"  autosize>
  <div *cdkVirtualFor="let item of treeData">
    <tui-tree
      [value]="item"
      [tuiTreeController]="true"
      [content]="treeContent"
      [childrenHandler]="treeChildrenHandler"></tui-tree>
  </div>
</cdk-virtual-scroll-viewport>
<ng-template #treeContent let-item>
...
</ng-template>