Hook-ul ngOnDestroy în Angular

Hook-ul ngOnDestroy se declanșează la ștergerea componentei. În acest hook puteți elibera resurse, elimina abonamentele la evenimente ale elementelor, opri temporizatoare etc.

Crearea și ștergerea componentei în Angular are loc atunci când aceasta este afișată și ascunsă reactiv folosind condiția if. Adică Angular nu doar ascunde componentele, ci le șterge și le readuce înapoi.

De asemenea, componentele sunt create și șterse, când sunt iterate reactiv în bucle. În acest caz, Angular creează și șterge și el componentele.

Să încercăm în practică. Să importăm interfața OnDestroy:

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

Să o conectăm la clasă:

export class UserComponent implements OnDestroy {
	
}

Și acum să scriem hook-ul nostru:

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

Creați un if reactiv cu ajutorul căruia va fi afișată o componentă copil. Verificați funcționarea hook-ului studiat.

În componenta părinte este dat un array cu nume de utilizatori. Creați o componentă copil cu un utilizator. Parcurgeți array-ul cu un ciclu și afișați componentele cu utilizatori. Creați un buton, la apăsarea căruia vor fi șterse elemente din array. Verificați că în componentele copil se va declanșa hook-ul la ștergere.