Hook ngOnDestroy u Angularu

Hook ngOnDestroy aktivira se prilikom uklanjanja komponente. U ovom hook-u možete osloboditi resurse, ukloniti pretplatu na događaje elemenata, zaustaviti tajmere i sl.

Kreiranje i uklanjanje komponente u Angularu dogadja se kada se ona reaktivno prikazuje i skriva pomoću uslova if. To znači da Angular ne samo da skriva komponente, već ih uklanja i vraća nazad.

Takođe, komponente se kreiraju i uklanjaju, kada se reaktivno iteriraju u petljama. U ovom slučaju Angular takođe kreira i uklanja komponente.

Hajde da probamo u praksi. Importujmo interfejs OnDestroy:

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

Povežimo ga sa klasom:

export class UserComponent implements OnDestroy {
	
}

A sada napišimo naš hook:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor je pokrenut');
	}
	
	ngOnDestroy() {
		console.log('onDestroy je primenjen');
	}
}

Napravite reaktivni if pomoću koga će se prikazivati child komponenta. Proverite rad proučavanog hook-a.

U parent komponenti dat je niz imena korisnika. Napravite child komponentu sa korisnikom. Iterirajte niz petljom i prikažite komponente sa korisnicima. Napravite dugme, pri kliku na koje će se brisati elementi iz niza. Proverite da li će u child komponentama biti aktiviran hook za uklanjanje.