Хук ngOnDestroy в Angular

Хук ngOnDestroy срабатывает при удалении компонента. В этом хуке можно освободить ресурсы, удалить подписку на события элементов, оставить таймеры и т.п.

Созадние и удаление компонента в Angular происходит, когда он реактивно показыватеся и скрывается с помощью условия if. То есть Angular не просто прячет компоненты, а удаляет их и возвращает обратно.

Также компоненты создаются и удаляются, когда они реактивно перебираются в циклах. В этом случае Angular также создает и удаляет компоненты.

Давайте попробуем на практике. Импортируем интерфейс OnDestroy:

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

Подключим его к классу:

export class UserComponent implements OnDestroy {
	
}

А теперь напишем наш хук:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

Сделайте реактивный if с помощью которого будет показываться дочерний компонент. Проверьте работу изученного хука.

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