Optimizing Lists and Rendering
Speed up large lists with tracking.
Optimizing Lists and Rendering is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why List Rendering Matters
Lists are the most common performance hotspot. Re-rendering an entire list on every change wastes work and resets DOM state. Angular gives you tools to render efficiently.
The @for Block
The built-in control-flow @for requires a track expression so Angular can identify each item across updates.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
}Why track Is Required
Without a stable identity, Angular cannot tell which items moved, were added, or removed. track maps each rendered node to its data so it reuses DOM instead of recreating it.
Tracking by Identity
Use a unique, stable key such as an id. Avoid track $index for lists that reorder, since index changes cause unnecessary DOM churn.
@for (user of users(); track user.id) {
<app-user-card [user]="user" />
}track $index When Appropriate
If items lack a unique id and never reorder (append-only logs), track $index is acceptable.
@for (line of logLines(); track $index) {
<p>{{ line }}</p>
}The Legacy trackBy
With the older *ngFor, you provide a trackBy function returning a stable key.
trackById(index: number, item: Item) {
return item.id;
}trackBy in the Template
Reference the function in the *ngFor microsyntax.
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>Empty and Loading States
@for supports an @empty block for when the collection is empty, avoiding extra *ngIf checks.
@for (item of items(); track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items yet.</li>
}Avoid Function Calls in Bindings
Functions in templates run every check. Precompute values into signals or memoized fields instead of calling methods in @for bodies.
OnPush + Immutable Lists
Combine OnPush with new array references on every change. With proper track, Angular updates only the rows that actually changed.
this.items.update(list => [...list, newItem]);Virtual Scrolling
For very large lists, render only visible rows with the CDK cdk-virtual-scroll-viewport, keeping the DOM small regardless of data size.
<cdk-virtual-scroll-viewport itemSize="48">
<div *cdkVirtualFor="let item of items">
{{ item.name }}
</div>
</cdk-virtual-scroll-viewport>Quick Check
Test your understanding of list optimization.
Recap
You learned to optimize lists with @for ... track (or legacy trackBy) using stable keys, an @empty block, immutable updates with OnPush, and virtual scrolling for very large collections.
Frequently asked questions
Is the “Optimizing Lists and Rendering” lesson free?
Yes — the full text of “Optimizing Lists and Rendering” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Optimizing Lists and Rendering”?
Speed up large lists with tracking. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Optimizing Lists and Rendering” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- How Change Detection Works
- OnPush Change Detection
- Zoneless Angular
- Optimizing Lists and Rendering