angular/control-flow

Why

NgIf, NgFor and NgSwitch are deprecated since Angular 20 with the intent to remove them in a later major. The built-in blocks need no CommonModule import, type-narrow inside @if, make track mandatory-by-habit in @for, and give an @empty branch for lists.

Fix

Run ng generate @angular/core:control-flow to migrate a project, then review the result. By hand: *ngIf="user as u" becomes @if (user; as u) { … }, *ngFor="let item of items; trackBy: byId" becomes @for (item of items; track item.id) { … } @empty { … }, and [ngSwitch] becomes @switch (x) { @case (…) { … } }.

Examples

<!-- bad -->
<li *ngFor="let item of items">{{ item.name }}</li>
<!-- good -->
@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

Sources

• Angular, Control flow
• Angular API, NgIf (deprecated since v20.0)
• Angular, Migration to control flow syntax

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/control-flow