Хук ngOnInit в Angular

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

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

import { OnInit } from '@angular/core';

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

export class UserComponent implements OnInit { }

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

export class UserComponent implements OnInit { constructor() { console.log('constructor is started'); } ngOnInit() { console.log('onInit is applied'); } }

Сделайте приватный метод show и вызовите его по инициализации компонента.