Virtual scrolling for large lists in Angular

Introduction

Virtual scrolling helps show only the visible items in a long list. This makes the app faster and smoother.

When you have a list with hundreds or thousands of items.

When loading all items at once makes the page slow or laggy.

When you want to save memory by not rendering off-screen items.

When you want smooth scrolling experience on mobile devices.

When you want to improve app performance without changing data.

Syntax

Angular

import { Component } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-virtual-scroll',
  template: `
    <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
      <div *cdkVirtualFor="let item of items" class="item">
        {{item}}
      </div>
    </cdk-virtual-scroll-viewport>
  `,
  styles: [
    `.viewport { height: 200px; width: 300px; border: 1px solid #ccc; }
     .item { height: 50px; display: flex; align-items: center; padding-left: 10px; border-bottom: 1px solid #eee; }`
  ]
})
export class VirtualScrollComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i + 1}`);
}

The cdk-virtual-scroll-viewport sets the visible area and item size.

The *cdkVirtualFor directive works like *ngFor but only renders visible items.

Examples

Basic virtual scroll with fixed item height 40px.

Angular

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

Virtual scroll with taller items (60px height).

Angular

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

Edge case: empty list shows no items.

Angular

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of []" class="item">
    No items to show
  </div>
</cdk-virtual-scroll-viewport>

Edge case: list with only one item.

Angular

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of ['Only one item']" class="item">
    {{item}}
  </div>
</cdk-virtual-scroll-viewport>

Sample Program

This Angular app shows a list of 1000 items using virtual scrolling. Only visible items render, making scrolling smooth and fast. The viewport has a fixed height and width with keyboard focus styles for accessibility.

Angular

import { Component } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h2>Virtual Scroll Example</h2>
    <cdk-virtual-scroll-viewport itemSize="50" class="viewport" aria-label="List of items">
      <div *cdkVirtualFor="let item of items" class="item" tabindex="0">
        {{item}}
      </div>
    </cdk-virtual-scroll-viewport>
  `,
  styles: [
    `.viewport { height: 200px; width: 300px; border: 1px solid #ccc; overflow: auto; }
     .item { height: 50px; display: flex; align-items: center; padding-left: 10px; border-bottom: 1px solid #eee; }
     .item:focus { outline: 2px solid #1976d2; background-color: #e3f2fd; }`
  ]
})
export class AppComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i + 1}`);
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ScrollingModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Important Notes

Virtual scrolling improves performance by rendering only visible items, reducing DOM size.

Time complexity for rendering is O(visible items), not total items.

Common mistake: forgetting to set itemSize causes wrong scroll behavior.

Use virtual scrolling when lists are very long; for short lists, normal *ngFor is simpler.

Summary

Virtual scrolling shows only visible list items to improve speed.

Use cdk-virtual-scroll-viewport and *cdkVirtualFor in Angular.

Set fixed itemSize and style viewport for best results.

Practice

1. What is the main benefit of using cdk-virtual-scroll-viewport in Angular for large lists?

easy

A. It renders only visible items to improve performance.

B. It automatically sorts the list items alphabetically.

C. It adds animations to list items when scrolling.

D. It duplicates list items for faster loading.

Solution

1. Step 1: Understand virtual scrolling purpose

   Virtual scrolling aims to improve performance by rendering only the visible items in a large list.

2. Step 2: Identify cdk-virtual-scroll-viewport role

   This Angular component implements virtual scrolling by showing only the items visible in the viewport, reducing DOM load.

3. Final Answer:

   It renders only visible items to improve performance. -> Option A

4. Quick Check:

   Virtual scrolling = render visible items only [OK]

Hint: Virtual scroll shows visible items only to boost speed [OK]

Common Mistakes:

• Thinking it sorts or animates items
• Assuming it duplicates items for speed
• Confusing with pagination

2. Which of the following is the correct way to use virtual scrolling in Angular template?

easy

A. <cdk-virtual-scroll-viewport><div *cdkVirtualFor="let item in items">{{item}}</div></cdk-virtual-scroll-viewport>

B. <cdk-virtual-scroll-viewport itemSize="50"><div *ngFor="let item of items">{{item}}</div></cdk-virtual-scroll-viewport>

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

D. <cdk-virtual-scroll-viewport itemSize="50"><div *ngFor="let item in items">{{item}}</div></cdk-virtual-scroll-viewport>

Solution

1. Step 1: Identify correct directive for virtual scroll

   Angular CDK virtual scroll requires *cdkVirtualFor instead of *ngFor to render visible items only.

2. Step 2: Check syntax and itemSize usage

   The itemSize attribute is required on cdk-virtual-scroll-viewport to set fixed item height for scrolling calculations.

3. Final Answer:

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

4. Quick Check:

   Use *cdkVirtualFor with itemSize on viewport [OK]

Hint: Use *cdkVirtualFor, not *ngFor, inside cdk-virtual-scroll-viewport [OK]

Common Mistakes:

• Using *ngFor instead of *cdkVirtualFor
• Using 'let item in items' instead of 'of'
• Omitting itemSize attribute

3. Given this Angular template snippet:

<cdk-virtual-scroll-viewport itemSize="40" style="height: 120px;">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

and items = ['A', 'B', 'C', 'D', 'E'], how many items will be visible at once?

medium

A. 3 items

B. 5 items

C. 2 items

D. 4 items

Solution

1. Step 1: Calculate viewport height in pixels

   The viewport height is set to 120px.

2. Step 2: Divide viewport height by itemSize

   Each item is 40px tall, so 120px / 40px = 3 items visible at once.

3. Final Answer:

   3 items -> Option A

4. Quick Check:

   Visible items = viewport height / itemSize = 3 [OK]

Hint: Divide viewport height by itemSize to find visible items [OK]

Common Mistakes:

• Counting all items instead of visible ones
• Ignoring style height on viewport
• Using wrong division operator

4. What is wrong with this Angular virtual scroll code?

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

medium

A. The *cdkVirtualFor directive must be on the viewport, not the div.

B. Missing style height on viewport causes no scroll.

C. itemSize must be a number, not a string.

D. Using *cdkVirtualFor with 'in' instead of 'of' causes an error.

Solution

1. Step 1: Check syntax of *cdkVirtualFor directive

   The correct syntax uses 'of' to iterate over items, not 'in'. Using 'in' causes a template error.

2. Step 2: Verify other attributes

   itemSize can be a string representing a number, and style height is recommended but not syntax error. The directive must be on the repeated element, not viewport.

3. Final Answer:

   Using *cdkVirtualFor with 'in' instead of 'of' causes an error. -> Option D

4. Quick Check:

   *cdkVirtualFor uses 'of', not 'in' [OK]

Hint: Use 'of' with *cdkVirtualFor, not 'in' [OK]

Common Mistakes:

• Using 'in' instead of 'of' in *cdkVirtualFor
• Forgetting to set viewport height
• Placing directive on wrong element

5. You want to display a list of 10,000 items with virtual scrolling. Which combination of settings ensures smooth scrolling and correct rendering?

hard

A. Use *ngFor inside a scrollable div without cdk-virtual-scroll-viewport.

B. Use cdk-virtual-scroll-viewport with fixed itemSize, set viewport height, and use *cdkVirtualFor.

C. Use cdk-virtual-scroll-viewport with variable itemSize and *cdkVirtualFor.

D. Use cdk-virtual-scroll-viewport without itemSize, and *ngFor for rendering.

Solution

1. Step 1: Understand virtual scroll requirements

   Virtual scrolling requires a fixed itemSize to calculate visible items and smooth scrolling.

2. Step 2: Use correct directives and styles

   Use cdk-virtual-scroll-viewport with a fixed height and *cdkVirtualFor to render only visible items efficiently.

3. Step 3: Avoid common pitfalls

   Not setting itemSize or using *ngFor causes performance issues or errors.

4. Final Answer:

   Use cdk-virtual-scroll-viewport with fixed itemSize, set viewport height, and use *cdkVirtualFor. -> Option B

5. Quick Check:

   Fixed itemSize + *cdkVirtualFor + viewport height = smooth scroll [OK]

Hint: Fixed itemSize and *cdkVirtualFor are key for smooth virtual scroll [OK]

Common Mistakes:

• Omitting itemSize or viewport height
• Using *ngFor instead of *cdkVirtualFor
• Trying variable item sizes without special handling