For Loop Explained | Control Flow, track, Context Variables

@for in Angular

  1. @for is a new control flow statement in Angular.
  2. It is used for looping (iteration) inside HTML templates.
  3. It replaces the older *ngFor syntax.
  4. It is used only in template (HTML) files, not in TypeScript files.
When the instructor says “for”, it refers to the @for control flow statement.


Loops Be Used in Angular

There are two places where looping can be done:

  1. TypeScript file → normal JavaScript loops (for, map, etc.)
  2. HTML template → @for control flow

@for should only be used in HTML, never in .ts files.


Why Use Signals with @for?

  1. Angular now recommends using Signals instead of normal properties
  2. Signals:
  3. Are faster
  4. Have better performance
  5. Handle DOM updates efficiently
  6. From Angular 19+ (and future versions), Signals are stable and preferred


Creating a Simple Array with Signals

TypeScript Code

export class App {
users = signal(["Anil", "Sam", "Peter", "Bruce"]);
}
  1. users is a signal
  2. It contains an array of strings
  3. Signals must be accessed using users()


Using @for with a Simple Array

HTML Code

<ul>
@for (user of users(); track user) {
<li>{{ user }}</li>
}
</ul>

Explanation

  1. user → loop variable
  2. users() → signal value
  3. track user → unique value for tracking items

Works best when array values are unique


Why track is Important?

  1. track helps Angular efficiently update the DOM
  2. It must be unique
  3. Avoid using $index for tracking


Why NOT $index?

  1. Index changes when:
  2. Items are added
  3. Items are removed
  4. This causes incorrect DOM updates

Best Practice

  1. Use a unique value like:
  2. ID
  3. Unique string


Looping Over an Array of Objects

TypeScript Code

usersDetail = signal([
{ id: 1, name: "Anil", surname: "Sidhu", email: "anil@test.com" },
{ id: 2, name: "Sam", surname: "Singh", email: "sam@test.com" },
{ id: 3, name: "Peter", surname: "Parker", email: "peter@test.com" },
{ id: 4, name: "Bruce", surname: "Wayen", email: "bruce@test.com" }
]);
  1. Each object has a unique id
  2. Ideal for track usage


Using @for with Objects

HTML Code

<ul>
@for (user of usersDetail(); track user.id) {
<li>
{{ user.name }} {{ user.surname }}
</li>
}
</ul>

Explanation

  1. track user.id → best practice
  2. Ensures stable DOM updates

Contextual Variables in @for

Angular provides built-in contextual variables inside @for.


$indexCurrent index (starts from 0)
$countTotal number of items
$firstTrue for first item
$lastTrue for last item
$evenTrue for even index
$oddTrue for odd index


Using $index for Display (Not Tracking)

<span>{{ $index + 1 }}</span>
  1. Used for serial numbers
  2. Add +1 if numbering should start from 1


Using $first and $last

Example

@if ($first) {
<span style="color:red">Admin</span>
}

@if ($last) {
<span style="color:orange">Guest</span>
}

Use Case

  1. First user → Admin
  2. Last user → Guest


Styling Even and Odd Rows

<li [style.backgroundColor]="$even ? '#ccc' : '#fff'">
  1. $even → even rows
  2. $odd → odd rows
  3. Useful for table-like UI


Showing Total Count at the End

@if ($count == $index + 1) {
<b>Total Users {{ $count }}</b>
}

Explanation

  1. Runs only on the last item
  2. Displays total number of users