🔁 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:

Variable	Meaning
`$count`	Total number of items
`$index`	Index of the current item (starts at 0)
`$first`	`true` if this is the first item
`$last`	`true` if this is the last item
`$even`	`true` if the index is even
`$odd`	`true` if the index is odd

🧪 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>