Virtual Scrolling with Angular CDK

Provide a code snippet on how to use Angular CDK's virtual scrolling to efficiently render large lists by only displaying elements in the DOM that are currently in view.
import { ScrollingModule } from '@angular/cdk/scrolling';
Import ScrollingModule from @angular/cdk/scrolling in the module where you want to use the virtual scroll feature.
  imports: [
    // ... other modules you may need ...
  // ... other NgModule metadata ...
export class YourModule { }
Include ScrollingModule in the imports array of your Angular Module.
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">
Use the cdk-virtual-scroll-viewport directive in your component template. The itemSize property sets the height of the items in pixels. Items will be rendered inside the viewport using the *cdkVirtualFor directive.
import { Component } from '@angular/core';

  selector: 'app-virtual-scroll-list',
  templateUrl: './virtual-scroll-list.component.html',
  styleUrls: ['./virtual-scroll-list.component.css']
export class VirtualScrollListComponent {
  items = [];

  constructor() {
    for (let i = 0; i < 10000; i++) { this.items.push({name: `Item #${i}`}); }
In your component class, define the items array that will be rendered in the virtual scroll. Here, we're populating 10,000 items for the sake of example.
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

export class VirtualScrollListComponent {
  // ...

  constructor(private viewPort: CdkVirtualScrollViewport) {}

  scrollToIndex(index: number): void {
To programmatically scroll to a particular index, inject CdkVirtualScrollViewport in your component's constructor and use the scrollToIndex method.