here we go with Angular 7!

Per this, if something like this has thousands and thousands of records...

<ng-container *ngFor="let mouse of mice">
   {{mouse.squeak}}
</ng-container>

 
 

...while you are scrolling through it all you may drop the unseen items out of the DOM to improve performance like so:

<cdk-virtual-scroll-viewport style="height: 100px;" height="50">
   <ng-container *cdkVirtualFor="let mouse of mice">
      {{mouse.squeak}}
   </ng-container>
</cdk-virtual-scroll-viewport>

 
 

You will notice both the height set by the style tag and the other height. You have to have the height setting or Angular 7 will blow up red to the console. A setting of zero will disable all caching. So what does this setting do? Does it denote how may items may sit in the DOM at once? A coworker thought it was also literally a second height in pixels yesterday. Neither of us know yet. We also don't know if this stuff will play nicely with the infinite scrolling which allows one to progressively load thousands and thousands of records. This stuff does not play nicely with items that are not consistent in size. There is a change-to-be in the experimental CDK stuff that allows one to place the autosize keyword at the outermost of the two tags immediately above and this attribute allows the CDK to guess at an average size for inconsistently sized items.

 
 

Addendum 12/6/2018: height should really be itemSize