Angular Academy · Lesson

Optimizing Lists and Rendering

Speed up large lists with tracking.

Lesson 4 of 413 steps

Optimizing Lists and Rendering is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Optimizing Lists and Rendering” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Optimizing Lists and Rendering”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

← Back to Angular Academy