🔁 Angular Lifecycle Hooks – Die unterschätzten Power-Tools

(Was wirklich hinter ngOnInit, ngAfterViewInit & Co. steckt)

Angular bietet dir eine ganze Toolbox an Lifecycle Hooks –
aber viele Entwickler nutzen nur einen Bruchteil davon.

1️⃣ Übersicht der wichtigsten Hooks

Hook	Wann wird er aufgerufen?
`ngOnInit()`	Nach dem ersten `@Input()`-Binding
`ngOnChanges()`	Bei Änderungen von `@Input()`-Werten
`ngAfterViewInit()`	Wenn die View & Child Components gerendert sind
`ngAfterContentInit()`	Wenn `ng-content` Inhalte projiziert wurden
`ngOnDestroy()`	Kurz vor der Zerstörung der Komponente

ngOnInit(): void {
  this.fetchData();
}

✅ Ideal für Initialisierung, aber nicht für DOM-Manipulation.

ngAfterViewInit(): void {
  this.chartService.initChart(this.chartContainer.nativeElement);
}

✅ Perfekt für Canvas, Charting & DOM-basierte Libraries.

ngOnDestroy(): void {
  this.subscriptions.unsubscribe();
}

✅ Für Memory-Leaks vermeiden & Sauberkeit bei Signals & Observables.

Mit Signals brauchst du oft keinen ngOnChanges() mehr:

effect(() => {
  if (inputSignal()) {
    this.loadData();
  }
});

Nutze die Lifecycle Hooks bewusst – sie geben dir
maximale Kontrolle über Verhalten & Performance deiner Komponenten.

👉 Nächster Beitrag:
🎛️ Angular Component Inputs & Outputs – Dynamik mit Klarheit