Virtual scrolling for large lists in Angular - Mini Project: Build & Apply

Virtual scrolling for large lists

📖 Scenario: You are building a web app that shows a long list of user names. To keep the app fast and smooth, you want to show only the visible part of the list at a time. This technique is called virtual scrolling.

🎯 Goal: Create an Angular standalone component that uses virtual scrolling to display a list of 1000 user names efficiently.

📋 What You'll Learn

Create a list of 1000 user names as strings

Set a page size variable to control how many items show at once

Use Angular's cdk-virtual-scroll-viewport to render the list with virtual scrolling

Display each user name inside the virtual scroll viewport

💡 Why This Matters

🌍 Real World

Virtual scrolling is used in apps that show long lists like contacts, messages, or product catalogs to keep the app fast and responsive.

💼 Career

Knowing how to implement virtual scrolling is important for frontend developers to optimize performance and user experience in real-world Angular applications.

1

Create the user list

Create a variable called users that is an array of strings containing exactly these three names: 'Alice', 'Bob', and 'Charlie'.

Angular

# Create the users array with 'Alice', 'Bob', and 'Charlie'
# Your code here

Need a hint?

Use square brackets to create an array and separate names with commas.

2

Add a page size variable

Add a variable called pageSize and set it to 10. This will control how many users show at once in the virtual scroll viewport.

Angular

users = ['Alice', 'Bob', 'Charlie']
# Add pageSize variable set to 10
# Your code here

Need a hint?

Just create a new variable with the number 10.

3

Generate 1000 user names

Replace the users array with a new array of 1000 strings. Each string should be 'User ' followed by the user number from 1 to 1000. Use Array.from with a mapping function to create this array.

Angular

users = ['Alice', 'Bob', 'Charlie']
pageSize = 10
# Replace users with 1000 user names 'User 1' to 'User 1000'
# Your code here

Need a hint?

Use Array.from({ length: 1000 }, (_, i) => `User ${i + 1}`) to create the array.

4

Add virtual scroll viewport in template

Create an Angular standalone component named UserListComponent. In its template, add a cdk-virtual-scroll-viewport with a height of 200px and item size of 20. Inside it, use an *ngFor to display each user from the users array in a div. Import ScrollingModule from @angular/cdk/scrolling and include it in the component's imports array.

Angular

users = Array.from({ length: 1000 }, (_, i) => `User ${i + 1}`)
pageSize = 10

// Create UserListComponent with cdk-virtual-scroll-viewport and *ngFor
// Your code here

Need a hint?

Use Angular's cdk-virtual-scroll-viewport with itemSize and fixed height. Use *ngFor inside it to show users.