0Pricing
Angular Academy · Lesson

Looping with @for

Render lists with @for and track expressions.

Looping with for

The at-for block repeats content for each item in a collection. It replaces the old star-ngFor directive and requires a track expression.

Basic for Syntax

Write an at-symbol, the word for, then item of items, and a required track clause naming a unique key.

// @for (item of items; track item.id) {
//   <li>{{ item.name }}</li>
// }

All lessons in this course

  1. Conditional Rendering with @if
  2. Looping with @for
  3. Switching with @switch
  4. Deferred Loading with @defer
← Back to Angular Academy