O Hook ngOnDestroy no Angular

O hook ngOnDestroy é acionado quando um componente é removido. Neste hook, você pode liberar recursos, remover assinaturas de eventos de elementos, limpar temporizadores, etc.

A criação e a destruição de um componente no Angular ocorrem quando ele é exibido e ocultado reativamente usando uma condição *ngIf. Ou seja, o Angular não apenas oculta os componentes, mas os remove e os recria novamente.

Os componentes também são criados e destruídos quando são iterados reativamente em loops. Nesse caso, o Angular também cria e remove os componentes.

Vamos testar na prática. Vamos importar a interface OnDestroy:

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

Vamos implementá-la na classe:

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

Agora, vamos escrever nosso hook:

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