🛠 Angular Control Flow – @if, @for & @switch meistern

(Die neue Kontrollfluss-Syntax in Angular 17–19 richtig nutzen)

Angular hat mit @if, @for und @switch einen modernen Template-Flow eingeführt.
Diese Features sind nicht nur syntaktischer Zucker – sie bieten Performance
und bessere Lesbarkeit.

1️⃣ @if – Bedingtes Rendern ohne *ngIf

@if (user) {
  <p>Hallo, {{ user.name }}!</p>
} @else {
  <p>Bitte einloggen.</p>
}

✅ Kein <ng-template> mehr
✅ Kein *ngIf="user; else xyz"

2️⃣ @for – Iterieren mit Stil

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

✅ Kein *ngFor mehr
✅ Direktes Tracken per track

3️⃣ @switch – Das neue ngSwitch

@switch (role) {
  @case ('admin') {
    <p>Willkommen, Admin!</p>
  }
  @case ('user') {
    <p>Willkommen, User!</p>
  }
  @default {
    <p>Unbekannte Rolle</p>
  }
}

✅ Klarer, lesbarer
✅ Kein ngSwitch mehr notwendig

💡 Vorteile

• Kompakter und strukturierter Code
• Besseres TypeScript-Mapping
• Mehr Performance durch optimierte Compilation

✅ Wann nutzen?

• Immer statt *ngIf, *ngFor, ngSwitch
• Besonders in komplexen UIs mit viel Logik im Template

Fazit

Die neue Flow-Syntax ist ein echter Gamechanger.
Nutze sie konsequent für bessere Templates, bessere Performance und besseren Code.

📚 Nächster Beitrag:
🔄 Angular Forms Advanced – Dynamik, Validierung & UX