Virtual Scrolling for larga children in mat-tree component

I am having some issues with my mat-tree component. I am trying to draw folder/files hierarchy with a root folder (or several root folders). The problem is when I try to open a very large children, the mat-tree starts rendering all the children nodes and it takes more than 1 minute. I have been reading about virtual scrolling, but I all the examples I found works for lists, not for lists inside objects.

This is my component:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node">
<div fxLayout="row" fxFlex>
<span *ngFor="let i of array(treeControl.getLevel(node))" class="indent"></span>
<mat-checkbox
[checked]="node.checked"
(change)="onCheckboxChange(node)"
[disabled]="!node.checkeable"
(click)="$event.stopPropagation()"
>
<button mat-icon-button><mat-icon> text_snippet </mat-icon></button>
</mat-checkbox>
<span
class="file-name"
fxLayoutAlign="center center"
(click)="downloadFile(node.file_ancillary_oid, node.size)"
>
{{ getFileName(node) }}
</span>
</div>
<div fxFlex="20" fxLayoutAlign="center center">{{ formatSize(node.size) }}</div>
</mat-tree-node>

<mat-tree-node *matTreeNodeDef="let node; when: isFolder" class="border-top">
<div fxLayout="row" fxFlex>
<span *ngFor="let i of array(treeControl.getLevel(node))" class="indent"></span>
<mat-checkbox [checked]="node.checked" (change)="onCheckboxChange(node)" [disabled]="!node.checkeable">
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon *ngIf="hasChild"> {{ treeControl.isExpanded(node) ? 'folder_open' : 'folder' }} </mat-icon>
</button>
</mat-checkbox>
<span fxLayoutAlign="center center" matTreeNodeToggle class="file-name"> {{ node.name }} </span>
</div>
<div fxFlex="20" fxLayoutAlign="center center">{{ node.size }}</div>
</mat-tree-node>
</mat-tree>

Continue reading...