Virtual scrolling for large lists in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is virtual scrolling in Angular?

Virtual scrolling is a technique that loads and renders only the visible items in a large list to improve performance and reduce memory use.

beginner

Which Angular module provides virtual scrolling features?

The Angular CDK (Component Dev Kit) provides the ScrollingModule, which includes virtual scrolling components.

intermediate

How does virtual scrolling improve user experience with large lists?

By rendering only visible items, virtual scrolling makes scrolling smooth and fast, avoiding delays and freezes caused by rendering all items at once.

beginner

What component is used in Angular CDK for virtual scrolling?

The component is used to create a viewport that only renders visible list items.

intermediate

Name one key input property of and its purpose.

The 'itemSize' property defines the height (or width) of each item, helping the viewport calculate which items to render.

What does virtual scrolling do in Angular?

A Renders only visible list items to improve performance

B Loads all list items at once for faster access

C Disables scrolling on large lists

D Automatically paginates the list

Virtual scrolling renders only the visible items to keep the app fast and responsive.

Which Angular package provides virtual scrolling components?

A @angular/animations

B @angular/forms

C @angular/router

D @angular/cdk/scrolling

The Angular CDK's ScrollingModule provides virtual scrolling features.

What is the role of the 'itemSize' property in ?

A Sets the height or width of each item

B Controls the color of items

C Specifies the scroll speed

D Defines the total number of items

'itemSize' tells the viewport how tall or wide each item is to calculate which items to show.

Why is virtual scrolling better than rendering all items in a large list?

A It uses more memory

B It slows down the app

C It improves scrolling smoothness and reduces memory use

D It disables user interaction

Virtual scrolling improves performance by rendering only visible items, making scrolling smooth.

Which HTML element is replaced by for virtual scrolling?

A <div>

B <ul>

C <table>

D <section>

often replaces

or other container elements to manage large lists efficiently.

Explain how virtual scrolling works in Angular and why it is useful for large lists.

Think about how showing fewer items at once helps the app run faster.

Describe the steps to implement virtual scrolling in an Angular app using the CDK.

Focus on module import, component usage, and key properties.