Hook ngOnDestroy en Angular

El hook ngOnDestroy se activa cuando se elimina un componente. En este hook puedes liberar recursos, eliminar suscripciones a eventos de elementos, detener temporizadores, etc.

La creación y eliminación de un componente en Angular ocurre cuando se muestra y se oculta reactivamente usando la condición if. Es decir, Angular no solo oculta los componentes, sino que los elimina y los restaura.

Los componentes también se crean y eliminan cuando se iteran reactivamente en bucles. En este caso, Angular también crea y elimina componentes.

Probemos en la práctica. Importemos la interfaz OnDestroy:

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

Conectémosla a la clase:

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

Y ahora escribamos nuestro hook:

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