Angular Control Flow if for switch

What is Control Flow if for switch in Angular?

Angular 17 introduced built-in template control flow — @if, @for, @switch and @defer — as a replacement for the *ngIf and *ngFor directives. It reads more like ordinary code, needs no imports, and is faster at runtime.

Why Control Flow if for switch matters

The new syntax removes the CommonModule import that trips up every standalone beginner, makes trackBy mandatory (so the common performance bug cannot happen), and adds an @empty block for the empty-list case.

Control Flow if for switch example

@if (jobs.length > 0) {
  @for (job of jobs; track job.id) {
    <app-job-card [job]="job" />
  } @empty {
    <p>No internships found.</p>
  }
} @else if (loading) {
  <app-spinner />
} @else {
  <p>Something went wrong.</p>
}

@switch (status) {
  @case ('open')   { <span class="tag">Accepting applications</span> }
  @case ('closed') { <span class="tag muted">Closed</span> }
  @default         { <span class="tag">Unknown</span> }
}

Key points to remember

• track is required in @for — the framework will not let you skip it.
• @empty handles the zero-items case without a separate @if.
• ng generate @angular/core:control-flow migrates an existing project automatically.
• The old directives still work; migration can be gradual.

Old syntax to new