Angular lifecycles

Angular Lifecycles 13.01.2021

Lifecycle Hooks

ngOnInit ngAfterViewInit ngAfterViewChecked ngAfterContentChecked ngDoCheck
ngOnDestroy ngAfterContentInit ngOnChanges

Reihenfolge der Hooks

(constructor) - Lifecycle von Angular
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
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!