# Хук 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` с помощью которого будет показываться дочерний компонент. Проверьте работу изученного хука.

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

← →
↑