🧠 Angular Lifecycle – Was wirklich passiert (und wann)

(Verstehe jeden Hook – von ngOnInit bis ngOnDestroy)

Viele reden vom Lifecycle – aber nur wenige verstehen wirklich, was Angular wann aufruft und warum.

Dieser Beitrag ist dein ultimativer Deep Dive in den Lifecycle deiner Komponenten – speziell für Angular 17–19.

1️⃣ Die Lifecycle-Hooks im Überblick

2️⃣ Der neue Way: Signals & Lifecycle

Mit Angular 17+ nutzen viele Signals – aber auch dort kannst du Lifecycle-ähnlich denken:

effect(() => {
  console.log('Signal changed!');
});

✅ Signals = Reactive Hooks, die unabhängig von klassischen Komponenten agieren.

3️⃣ ngOnDestroy ist kein Luxus – sondern Pflicht

Warum? → Speicherlecks.
Subscriptions, Intervals, WebSocket-Connections:
Alles muss aufgeräumt werden!

Tipp:

destroyRef.onDestroy(() => {
  this.sub.unsubscribe();
});

Oder mit takeUntil(destroy$) aus rxjs + Subject.

4️⃣ ViewChild vs AfterViewInit

Viele Fehler entstehen, wenn man denkt ViewChild ist sofort da – ist es nicht!

@ViewChild('myElement') el!: ElementRef;

ngAfterViewInit() {
  this.el.nativeElement.focus();
}

❌ Niemals im Konstruktor oder ngOnInit darauf zugreifen.

Fazit

Der Angular Lifecycle ist kein Relikt –
sondern essentiell, um Komponenten sicher, performant und wartbar zu bauen.

✅ Kenne die Reihenfolge
✅ Nutze ngOnDestroy immer
✅ Kombiniere klassisch & modern (z.B. Signals)

👉 Nächster Beitrag:
📦 Angular Zone-Free – Komplett ohne NgZone?