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:

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

Vamos implementá-la na classe:

export class UserComponent implements OnDestroy {
	
}

Agora, vamos escrever nosso hook:

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

Crie um *ngIf reativo com o qual um componente filho será exibido. Verifique o funcionamento do hook estudado.

No componente pai, há um array de nomes de usuários. Crie um componente filho para o usuário. Itere o array com um loop e exiba os componentes com os usuários. Crie um botão que, ao ser clicado, removerá elementos do array. Verifique se o hook de destruição será acionado nos componentes filhos.