Blog

Jede Komponente hat bei Angular einen Lebenszyklus, der beginnt, wenn Angular die Komponentenklasse instanziiert und die Komponentenansicht zusammen mit ihren untergeordneten Ansichten rendert.
Doch bleibt es nicht dabei, denn nach anschließen wird dies mit einer Änderungserkennung fortgesetzt.
So kann geprüft werden, wann sich etwas in der Komponente ändert.
Dadurch wird der Programmierer in die Lage versetzt auf Änderungen zu reagieren. Wenn sich zum Beispiel ein Wert über @Input ändert muss so nicht gleich die ganze Komponenten neu geladen werden, sondern es kann direkt auf diese Änderung reagiert werden.
Ebenso ist es wichtig Ressourcen nach der Zerstörung einer Komponente wieder freizugeben, um nicht in Memory Leaks zu laufen.

Übersicht aller Angular Livecycle hooks

ngOnChanges() – Wird noch vor ngOnInit aufgerufen und jedesmal, wenn sich einer der Data-Bound Werte ändert, wie zum Beispiel @Input() Variablen.

ngOnInit() – wird aufgerufen, nachdem die input Parameter aufgerufen wurden und ist stanardmäßig in jeder Komponente enthalten. Wir nur einmal nach ngOnChanges aufgerufen.

ngDoCheck() – Wird jedes mal nach ngOnChanges und ngOnInit aufgerufen.
Erkennen und reagieren auf Änderungen, die Angular nicht selbst erkennen kann oder will.

ngAfterContentInit() – Wird einmalig nach ngDoCheck aufgerufen
Reagiert, nachdem Angular externen Inhalt in die Ansicht der Komponente oder in die Ansicht geladen hat, in der sich eine Direktive befindet.

ngAfterContentChecked() – Wir nach ngAfterContentInit aufgerufen und nach ngDoCheck
Wird aufgerufen, nachdem Angular den in die Direktive oder Komponente projizierten Inhalt überprüft hat.

ngAfterViewInit() – Wird einmal nach ngAfterContentChecked aufgerufen
Wird aufgerufen, nachdem Angular die Ansichten und untergeordneten Ansichten der Komponente oder die Ansicht, die die Direktive enthält, initialisiert hat.

ngAfterViewChecked() – Nach ngAfterViewInit und ngAfterContentChecked
Wird aufgerufen, nachdem Angular die Ansichten und untergeordneten Ansichten der Komponente oder die Ansicht, die die Direktive enthält, überprüft hat.

ngOnDestroy() – Wird sofort aufgerufen, wenn eine Komponente oder Direktive zerstört wird
Dieser Hook ist daher sehr wichtig um zum Beispiel Memory Leaks zu verhindern, die zum Beispiel durch unbeendete Subscriptions entstehen.