Хук ngOnInit в Angular

Хук ngOnInit срабатывает при инициализации компонента. По действию он похож на конструктор класса, но в нем можно выполнять более сложные задачи, нпример, загрузку данных с сервера.

Давайте посмотрим, как пользоваться данным хуком. Для начала нужно импортировать его интерфейс:

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

Далее нужно включить интерфейс в класс компонента:

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

}

После этого мы сможем написать в классе компонента метод ngOnInit и этот метод выполнится автоматически при инициализации класса. Проверим его работу:

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