🧠 Angular Change Detection verstehen – OnPush, Signals & Zonenfrei

(Warum deine App manchmal langsam ist – und wie du es behebst)

Change Detection ist eines der mächtigsten – aber auch meistmissverstandenen Konzepte in Angular.
Hier lernst du, wie du Kontrolle gewinnst und Performance gezielt optimierst.

1️⃣ Default vs. OnPush verstehen

Default-Strategie checkt alle Komponenten immer, bei jedem Event.
Mit ChangeDetectionStrategy.OnPush reduzierst du das auf Input-Änderungen.

@Component({
  selector: 'app-my',
  changeDetection: ChangeDetectionStrategy.OnPush,
  ...
})

🧠 Tipp: Nutze immer OnPush – außer du hast einen triftigen Grund dagegen.

2️⃣ Signals für reaktive Updates

Mit Angular Signals kannst du reaktive Werte definieren, die automatisch Updates triggern:

const user = signal<User | null>(null);

effect(() => {
  if (user()) {
    console.log('Benutzer geladen:', user()?.name);
  }
});

Ideal in Kombination mit OnPush – granular, effizient, elegant.

3️⃣ Zonenfrei? Ja bitte!

Mit zone.js trackt Angular alle Async-Ereignisse – aber das ist nicht immer nötig.

Nutze @angular/core/rxjs-interop + runOutsideAngular für zoneless Performance:

this.ngZone.runOutsideAngular(() => {
  this.http.get(...).subscribe(...);
});

4️⃣ ChangeDetection bewusst steuern

Du kannst mit ChangeDetectorRef.markForCheck() gezielt Komponenten refreshen:

constructor(private cdr: ChangeDetectorRef) {}

ngOnChanges() {
  this.cdr.markForCheck();
}

5️⃣ Template-Optimierung

• Vermeide [hidden], nutze *ngIf
• Nutze trackBy in *ngFor
• Setze async-Pipes sinnvoll ein

Fazit

Change Detection ist kein Mysterium.
Mit OnPush, Signals und bewusstem Zonen-Einsatz bekommst du ultraschnelle Angular-Apps.

🚀 Nächster Beitrag:
📚 Angular Style Guide 2025 – Konventionen, Struktur & Teamflow