Angular lifecycles

Angular Lifecycles      13.01.2021

Lifecycle Hooks

ngOnInit ngAfterViewInit ngAfterViewChecked ngAfterContentChecked ngDoCheck ngOnDestroy ngAfterContentInit ngOnChanges

Reihenfolge der Hooks

  1. (constructor) - Lifecycle von Angular
  2. ngOnChanges
  3. ngOnInit
  4. ngDoCheck
  5. ngAfterContentInit
  6. ngAfterContentChecked
  7. ngAfterViewInit
  8. ngAfterViewChecked
  9. ngOnDestroy

Time for some coding...

Lifecycle Hooks Pt. 1

ngOnChanges
- Check, ob properties verändert wurden

ngOnInit
- Komponente wird erstellt und gerendert
- Children (der Komponente) werden erstellt und gerendert

ngDoCheck
- Manueller Check für das, Angular selbst nicht detecten kann (beim ersten mal nach onOnit, danach nach onChanges)
.....
ngDestroy
- Komponente wird zerstört und vom DOM entfernt

Lifecycle Hooks Pt. 2

ngAfterContentInit
- nach der Projezierung vom externen content in die View der Komponente

ngAfterContentChecked
-nach dem Check des externen contents in der View der Komponente

ngAfterViewInit
- nach der Inititialisierung der Komponente + Children

ngAfterViewChecked
- nach dem Check der Komponente + Children

Wie benutzt man die Hooks?

export class someComponent implements OnInit, OnDestroy { ngOnInit(): void{ } ngOnDestroy(): void{ } }
// ***ngOnInit*** // Alles was 1x ausgeführt werden soll (z.B. Subscriptions, Initial Values) ngOnInit(): void{ this.initialValue = 1; this._sub = this.service.method().subscribe(); }// ****ngDestroy**** // Alles was vor dem Auflösen der Komponente passieren soll (z.B. unsubscribes, event handlers gegen Memory Leaks) ngOnDestroy(): void{ this.sub?.unsubscribe(); }// ****ngOnChanges**** // Bei Änderungen von Inputs // SimpleChange für bessere Performance nutzen ngOnChanges(change:SimpleChange): void{ if(change.inputName){ doSomething() } }// ****ngDoCheck**** // Bei Änderungen die Angular nicht selbst bemerkt (Ebenfalls sehr ressourcenhungrig) ngDoCheck(): void{ if(this.value1 !== this.value2){ this.changeDetected = true; } else this.changeDetected = false; }// ****ngAfterViewInit / ngAfterViewChecked**** // Wenn die View der Komponente mit den Children gerendert wurde // HTML <fancy-component #child></fancy-component> // TS @ViewChild('child') child; ngAfterViewInit(): void{ this.value = this.child.nativeElement.value }

Danke für die Aufmerksamkeit!