Control Flow (@if / @for / @switch) in Angular
From the Angular cheat sheet · Templates & Directives · verified Jul 2026
Control Flow (@if / @for / @switch)
Built-in template control flow — replaces *ngIf/*ngFor/*ngSwitch in Angular 17+.
typescript
<!-- @if / @else if / @else -->
@if (user) {
<p>Hello, {{ user.name }}</p>
} @else if (loading) {
<p>Loading...</p>
} @else {
<p>Sign in to continue</p>
}
<!-- @for (REQUIRES track) -->
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>No items</li>
}
<!-- @switch -->
@switch (status) {
@case ('loading') { <p>Loading...</p> }
@case ('error') { <p>Error!</p> }
@default { <p>Ready</p> }
}💡 @if/@for/@switch are the modern way (Angular 17+) — no imports needed
⚠️ @for REQUIRES a track expression — usually track item.id or track $index
⚡ @for $index/$first/$last/$even/$odd are available as local variables
🔥 ng generate @angular/core:control-flow migrates *ngIf/*ngFor/*ngSwitch