A volte capita di a vere una lista con moltissimi oggetti e i doverli mostrare all'utente. Sebbene paginare questi dati o caricarli solo su richiesta è sicuramente una buona scelta, questa strada non è sempre percorribile.
Renderizzare centinaia o migliaia di elementi renderebbe la pagina molto lenta al limite dell'inusabile. In questi casi può tornare utile la funzionalità di scrolling di Angular CDK. Questa funzionalità virtualizza lo scrolling renderizzando solo gli elementi visibili, alcuni elementi prima e alcuni elementi dopo. Mentre scrolliamo gli elementi, in base alla posizione dello scrolling la funzionalità calcola quali elementi della lista devono essere renderizzati e li mette in binding con quelli già creati sostituendone quindi i dati. In questo modo il binding è velocissimo in quanto si riusano sempre gli stessi elementi cambiandone solo il binding. Il prossimo codice mostra un esempio di utilizzo della funzionalità.

<cdk-virtual-scroll-viewport itemSize="30">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

Il component cdk-virtual-scroll-viewport è il contenitore degli elementi, mentre la direttiva cdkVirtualFor è come ngFor, ma virtualizzata. La proprietà itemSize è molto importante in quanto specifica che ogni elemento è alto 30 pixel e quindi il processo di calcolo degli elementi da visualizzare in base alla posizione dello scrolling è estremamente veloce.