Virtual scrolling for large lists in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular CDK virtual scrolling module.

Angular

import { [1] } from '@angular/cdk/scrolling';

Drag options to blanks, or click blank then click option'

AScrollingModule

BScrollModule

CVirtualScrollModule

DVirtualModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent module like VirtualScrollModule.

Confusing with ScrollModule which does not exist.

The correct module to import for virtual scrolling is ScrollingModule from Angular CDK.

2fill in blank

medium

Complete the template code to enable virtual scrolling with a fixed item size.

Angular

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

Drag options to blanks, or click blank then click option'

A100%

B'50px'

Cauto

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string with units like '50px' instead of a number.

Using 'auto' or '100%' which are invalid for itemSize.

The itemSize input expects a number representing the pixel height of each item, so 50 is correct.

3fill in blank

hard

Fix the error in the component code to correctly provide the list for virtual scrolling.

Angular

items = Array.from({length: 1000}, (_, i) => [1]);

Drag options to blanks, or click blank then click option'

Ai + 1

B'item ' + i

Ci * 2

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Using just the index number which may not be descriptive.

Using arithmetic expressions that don't create strings.

The virtual scroll list should be an array of strings like 'item 0', 'item 1', etc. So 'item ' + i is correct.

4fill in blank

hard

Fill both blanks to set the viewport height and enable virtual scrolling in the template.

Angular

<cdk-virtual-scroll-viewport [1]="200px" itemSize=[2]>
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

Drag options to blanks, or click blank then click option'

Astyle.height

B50

Cstyle.width

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' attribute directly which is invalid.

Confusing width with height.

Passing a string like '50px' for itemSize.

The viewport height is set using the style.height="200px" attribute, and itemSize=50 provides the fixed pixel height for each item.

5fill in blank

hard

Fill all three blanks to create a virtual scroll viewport with a fixed height, item size, and track the rendered range.

Angular

<cdk-virtual-scroll-viewport [1]="300px" itemSize=[2] (scrolledIndexChange)="[3] = $event">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

Drag options to blanks, or click blank then click option'

Astyle.height

B50

CstartIndex

DscrollIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'width' instead of 'height' for style.

Passing itemSize as a string with units.

Using an incorrect variable name for the event binding.

Use style.height to set viewport height, 50 as item size in pixels, and startIndex to track the scrolled index.