Хук ngOnDestroy в Angular

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

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

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

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

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

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

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

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

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}