Virtual scrolling for large lists in Angular - Step-by-Step Execution

Concept Flow - Virtual scrolling for large lists

User scrolls list

↓

Calculate visible items range

↓

Render only visible items

↓

Update scroll position and buffer

↓

Repeat on scroll

Virtual scrolling shows only the visible part of a large list to improve performance by rendering fewer items.

Execution Sample

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>`
})
export class VirtualScrollComponent {
  items = Array.from({length: 10000}).map((_, i) => `Item #${i}`);
}

This Angular component uses CDK virtual scroll to render only visible items from a 10,000-item list.

Execution Table

Step	User Scroll Position (px)	Visible Range (startIndex-endIndex)	Rendered Items Count	Action
1	0	0-9	10	Initial render of first 10 items
2	100	2-11	10	User scrolls down, viewport updates visible range
3	250	5-14	10	Viewport recalculates and renders new visible items
4	500	10-19	10	Scroll continues, items updated accordingly
5	950	19-28	10	Viewport shifts visible window, rendering next items
6	5000	100-109	10	Fast scroll jumps to middle, renders visible items
7	495000	9900-9909	10	Scroll near end, renders near-last visible items
8	499500	9990-9999	10	Scroll reaches end, renders final items
9	499550	9990-9999	10	Scroll beyond end ignored, no new items rendered

💡 Scrolling stops or no new items to render beyond list end

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	After Step 8	Final
scrollPositionPx	0	100	500	5000	499500	499550
visibleStartIndex	0	2	10	100	9990	9990
visibleEndIndex	9	11	19	109	9999	9999
renderedItemsCount	10	10	10	10	10	10

Key Moments - 3 Insights

Why does the component render only 10 items even though the list has 10,000?

Because virtual scrolling calculates the visible range based on scroll position and item size, rendering only items visible in the viewport (see execution_table rows 1 and 2). This improves performance by not rendering the entire list.

What happens if the user scrolls very fast down the list?

The viewport jumps to the new visible range and renders only those items (see execution_table row 6). It does not render all intermediate items, saving resources.

Why does scrolling beyond the list end not render new items?

Because the visible range is capped by the list length (see execution_table rows 8 and 9). The component prevents rendering items outside the list bounds.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what is the visible range of items?

A 0-9

B 5-14

C 10-19

D 19-28

💡 Hint

Check the 'Visible Range' column in execution_table row 4.

At which step does the scroll position reach 5000 pixels?

A Step 6

B Step 5

C Step 3

D Step 7

💡 Hint

Look at the 'User Scroll Position (px)' column in execution_table.

If the itemSize changes from 50 to 100 pixels, how will the rendered items count change?

A Rendered items count will double

B Rendered items count will halve

C Rendered items count stays the same

D Rendered items count becomes zero

💡 Hint

Rendered items depend on viewport height divided by itemSize; see variable_tracker for renderedItemsCount.

Concept Snapshot

Virtual scrolling shows only visible items in a large list.
Angular CDK provides cdk-virtual-scroll-viewport.
Set itemSize to define each item's height.
Viewport calculates visible range on scroll.
Only visible items are rendered, improving performance.
Scroll beyond list end does not render extra items.

Full Transcript

Virtual scrolling in Angular uses a special viewport component that shows only the items visible on screen from a large list. When the user scrolls, the component calculates which items should be visible based on the scroll position and the height of each item. It then renders only those items, not the entire list. This makes the app faster and smoother, especially with thousands of items. The example code uses Angular CDK's cdk-virtual-scroll-viewport with an item size of 50 pixels and a list of 10,000 items. The execution table shows how the visible range and rendered items update as the user scrolls down or jumps to different positions. The variable tracker follows scroll position and visible indexes. Key moments explain why only a small number of items render and how fast scrolling works. The visual quiz tests understanding of visible ranges and effects of changing item size. Overall, virtual scrolling is a smart way to handle large lists efficiently in Angular.

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