🔁 Angular 20 Control Flow — Part 2: `@for` is the New `*ngFor`

Hey again, Angular devs! 👋

In Part 1, we explored the new @if, @else if, and @else blocks in Angular 20’s control flow syntax.
Now it’s time to tackle loops with the powerful and expressive @for block.

🔁 What is @for?

The @for block in Angular 20 allows you to render a block of content repeatedly for each item in a collection — essentially replacing the traditional *ngFor.

Syntax :

  @for (item of collection; track uniqueKey) {
     <li>{{ item}}</li>
   } @empty {
     <li>There are no items.</li>
   }

📌 Note:

You can optionally include an @empty section immediately after the @for block content. The content of the @empty block displays when there are no items.

🧪 Example 1: Basic Looping with @for

Here’s a simple example demonstrating the use of @if and @for to render a list of countries in the template. As shown in the code below, a country API is triggered, and the country$ observable provides the list of countries. We use the async pipe to subscribe to the observable, and the @for loop is used to display each country in the template.

🌐 Template:

<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (country of countryList; track $index) {
      <div class="country">
        <span>{{ country.flag }}</span>
        <span>{{ country.name.common }}</span>
      </div>
    }
  }
</div>

📘 Component (TypeScript):

country$ = this.http.get<any>(this.URL).pipe(
  map((res: any) => res)
);

📌 Note:

• @for is async-safe, allowing you to combine it neatly with @if and observables.
• You must use track to optimize performance by helping Angular identify items uniquely.

❓ Wait… What’s This track Keyword?

Great question!

track:

The track keyword provides a unique key for each item in the collection. This helps Angular perform efficient DOM updates when the collection changes (e.g., when items are added, removed, or reordered).

It’s like trackBy in *ngFor, but much cleaner.

@for (item of items; track item.id) {
  <!-- unique key is item.id -->
}

🧠 Implicit Variables in @for

Angular gives us a set of built-in variables inside a @for block:

🧪 Example 2: Using All Implicit Variables

<div class="country-list">
  @if (country$ | async; as countryList) {
    @for (
      country of countryList;
      track $index;
      let index = $index,
          even = $even,
          odd = $odd,
          last = $last,
          first = $first,
          count = $count
    ) {
      <div class="country">
        <div class="label">
          <span>{{ index }} : {{ country.flag }}</span>
          <span>{{ country.name.common }}</span>
        </div>
        <hr />
        <div class="variable">
          <span style="color: red">Odd: {{ odd }}</span>
          <span style="color: blue">Even: {{ even }}</span>
          <span style="color: aqua">Last: {{ last }}</span>
          <span style="color: orange">First: {{ first }}</span>
          <span style="color: green">Count: {{ count }}</span>
        </div>
      </div>
    }
  }
</div>

Output

❗ Heads-Up

Angular’s @for block does not support flow-modifying statements like break or continue — unlike traditional JavaScript loops.

✅ Summary for Part 2

• Use @for to iterate over collections in Angular 20.
• Use track for optimized rendering.
• Leverage built-in loop metadata with $index, $count, etc.
• Combine it with @if for reactive, observable-based logic.

👉 In Part 3, we’ll dive into @switch and how to manage multiple conditional templates elegantly. If you missed Part 1, go check it out!

✍️ Author: Vetriselvan

👨‍💻 Frontend Developer | Code Lover | Exploring Angular’s future