Wie funktioniert die Change Detection in Angular und was macht OnPush?

Question

Accepted Answer

**Change Detection** ist die Art und Weise, wie Angular das DOM mit Komponentendaten synchron hält — nach jedem potenziell zustandsändernden Event überprüft es Komponenten und aktualisiert die View wo sich Daten geändert haben. Standardmäßig ist diese Überprüfung breit gefächert; **`OnPush`** grenzt sie für Leistung ein.

## Wie die Standard-Change Detection funktioniert

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

Standardmäßig (`Default`-Strategie) überprüft Angular **jede Komponente** bei jedem Event — korrekt, aber potenziell verschwendet in großen Bäumen.

## OnPush — Komponenten überspringen, die sich nicht geändert haben können

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

Mit `OnPush` **überspringt** Angular die Überprüfung dieser Komponente, es sei denn eines davon findet statt:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Dies kann die Arbeit in großen Bäumen dramatisch reduzieren — Angular ignoriert ganze Unterbäume, von denen es weiß, dass sie sich nicht geändert haben können.

## Das Hauptproblem: Unveränderlichkeit erforderlich

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` verlässt sich auf **Referenzänderungen** für Eingaben, daher müssen Sie den Zustand unveränderlich aktualisieren (neue Objekte/Arrays). Mutation an Ort und Stelle ist der klassische OnPush-Bug — die View wird nicht aktualisiert.

## Manuelle Steuerung

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Die Zukunft: signals + zoneless

Signals ermöglichen noch präzisere, **feingranulare** Aktualisierungen (nur Views die ein geändertes Signal lesen), was auf die vollständige Entfernung von Zone.js hindeutet.

## Warum es wichtig ist

Change Detection ist zentral für die Angular-Leistung.

Das Verständnis, dass die Standardstrategie den gesamten Baum überprüft — und dass `OnPush` + unveränderliche Daten Überprüfungen auf Komponenten beschränken, deren Eingaben sich tatsächlich geändert haben — ist der Haupthebel zur Optimierung großer Apps.

Die Anforderung der Unveränderlichkeit ist eine häufige Quelle von "Warum wird meine View nicht aktualisiert?"-Bugs, und Signals repräsentieren den Weg, den Angular zu noch feingranularerer, effizienterer Reaktivität beschreitet.