Angular › Angular CDK (Component Dev Kit)

What does the CDK's virtual scrolling feature do, and why is it useful for very long lists?

Intermediate

Answer

Virtual scrolling only renders the items currently visible on screen, plus a small buffer, instead of rendering every single item in a very long list at once. This keeps the page fast and responsive even when a list contains thousands of items, since the browser never has to manage thousands of real DOM elements at the same time.

import { ScrollingModule } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-big-list',
  template: `
    <cdk-virtual-scroll-viewport itemSize="50" style="height: 400px">
      <div *cdkVirtualFor="let item of items">{{ item }}</div>
    </cdk-virtual-scroll-viewport>
  `
})
export class BigListComponent { items = Array.from({ length: 10000 }); }

Real-world example A contacts app with ten thousand entries stays smooth and fast while scrolling, using the CDK's virtual scroll viewport to only render the handful of contacts currently visible on screen at any moment.

Common follow-ups: What happens if list items have different heights instead of a fixed itemSize?;How much of a real performance difference does virtual scrolling make for a list this large?

Performance & Lazy Loading;Directives