ngOnInit Hook in Angular

De hook ngOnInit wordt geactiveerd bij de initialisatie van de component. Qua werking lijkt het op de constructor van de klasse, maar hierin kunnen complexere taken worden uitgevoerd, bijvoorbeeld het laden van gegevens van een server.

Laten we eens kijken hoe je deze hook gebruikt. Eerst moet de interface worden geïmporteerd:

app/user/user.component.tsimport { OnInit } from '@angular/core';

Vervolgens moet de interface in de componentklasse worden opgenomen:

app/user/user.component.tsexport class UserComponent implements OnInit {

}

Hierna kunnen we in de componentklasse de methode ngOnInit schrijven en deze methode wordt automatisch uitgevoerd bij de initialisatie van de klasse. Laten we de werking controleren:

app/user/user.component.tsexport class UserComponent implements OnInit {
  constructor() {
    console.log('constructor is started');
  }
  ngOnInit() {
    console.log('onInit is applied');
  }
}