Хук ngOnDestroy у Angular-у

Хук ngOnDestroy се активира при уклањању компоненте. У овом хуку можемо ослободити ресурсе, уклонити претплату на догађаје елемената, зауставити тајмере и слично.

Креирање и уклањање компоненте у Angular-у се дешава када се она реактивно приказује и скрива користећи услов if. То значи да 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');
  }
}