Virtual scrolling for large lists in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular's virtual scrolling improve performance?

Angular's CDK virtual scrolling renders only a subset of list items visible in the viewport. What is the main benefit of this approach?

A It duplicates list items to fill the viewport faster.

B It preloads all list items in the background to speed up scrolling.

C It reduces memory and DOM nodes by rendering only visible items, improving scroll performance.

D It disables scrolling until all items are rendered to avoid lag.

💡 Hint

Think about how rendering fewer elements affects browser speed.

Virtual scrolling renders only the visible items plus a small buffer, reducing DOM size and improving performance especially for large lists.

📝 Syntax

intermediate

Identify the correct syntax for using Angular CDK virtual scroll viewport

Which option shows the correct way to set up a virtual scroll viewport with a fixed item size of 50 pixels?

A <cdk-virtual-scroll-viewport [itemSize]="50">...</cdk-virtual-scroll-viewport>

B <cdk-virtual-scroll-viewport itemSize="50">...</cdk-virtual-scroll-viewport>

C <cdk-virtual-scroll-viewport item-size="50">...</cdk-virtual-scroll-viewport>

D <cdk-virtual-scroll-viewport [item-size]="50">...</cdk-virtual-scroll-viewport>

💡 Hint

Angular inputs use camelCase and square brackets for binding.

The correct input property is itemSize with camelCase, and binding uses square brackets for dynamic values.

🔧 Debug

advanced

Why does the virtual scroll viewport show blank space instead of items?

Given this Angular template snippet:

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

If the viewport shows empty space and no items, what is the most likely cause?

A The items array is empty or undefined, so nothing renders.

B The itemSize input is missing or set to zero, so viewport cannot calculate visible items.

C The *cdkVirtualFor directive is misspelled, causing no rendering.

D The viewport height is not set via CSS, so it collapses and hides items.

💡 Hint

Check if the container has a height to show scrollable content.

The virtual scroll viewport requires a fixed height set by CSS to display and scroll items properly. Without height, it collapses and shows blank space.

❓ state_output

advanced

What is the output when scrolling triggers an event in virtual scroll?

Consider this Angular component snippet:

items = Array.from({length: 1000}, (_, i) => `Item ${i+1}`);

onScrollIndexChange(index: number) {
  console.log('Start index:', index);
}

And the template:

<cdk-virtual-scroll-viewport [itemSize]="20" (scrolledIndexChange)="onScrollIndexChange($event)">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

What will be logged when the user scrolls down the list?

A The last visible item's index in the viewport after scrolling.

B The index of the first visible item in the viewport as the user scrolls.

C The total number of items in the list each time scrolling happens.

D The scroll position in pixels from the top of the list.

💡 Hint

Check what the scrolledIndexChange event emits.

The scrolledIndexChange event emits the index of the first visible item in the viewport during scrolling.

🧠 Conceptual

expert

Why might virtual scrolling cause issues with dynamic item heights?

Virtual scrolling in Angular CDK assumes fixed item heights for calculations. What problem arises if list items have dynamic heights?

A The viewport cannot correctly calculate scroll positions, causing visual glitches or incorrect item rendering.

B The scroll bar disappears because the list height is fixed.

C Dynamic heights improve performance by reducing DOM nodes automatically.

D The virtual scroll automatically adjusts heights, so no issues occur.

💡 Hint

Think about how fixed size assumptions affect scrolling calculations.

Virtual scrolling relies on fixed item sizes to calculate which items to render and scroll offsets. Dynamic heights break these calculations, causing glitches.