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:

import { OnDestroy } from '@angular/core';

Conectémosla a la clase:

export class UserComponent implements OnDestroy {
	
}

Y ahora escribamos nuestro hook:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

Crea un if reactivo con el cual se mostrará un componente hijo. Verifica el funcionamiento del hook aprendido.

En el componente padre hay un array de nombres de usuario. Crea un componente hijo para el usuario. Itera el array con un bucle y muestra los componentes con los usuarios. Crea un botón que, al hacer clic, elimine elementos del array. Verifica que en los componentes hijos se active el hook de eliminación.