Хук ngOnDestroy у Angular-у

Хук ngOnDestroy се активира при уклањању компоненте. У овом хуку можемо ослободити ресурсе, уклонити претплату на догађаје елемената, зауставити тајмере и слично.

Креирање и уклањање компоненте у Angular-у се дешава када се она реактивно приказује и скрива користећи услов if. То значи да Angular не само да крије компоненте, већ их уклања и враћа назад.

Такође, компоненте се креирају и уклањају када се реактивно пролазе кроз петље. У том случају Angular такође креира и уклања компоненте.

Хајде да испробамо у пракси. Импортујмо интерфејс OnDestroy:

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

Повежимо га са класом:

export class UserComponent implements OnDestroy {
	
}

А сада напишимо наш хук:

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

Направите реактивни if помоћу кога ће се приказивати дете компонента. Проверите рад проученог хука.

У родитељској компоненти дат је низ имена корисника. Направите дете компоненту са корисником. Прођите кроз низ петљом и прикажите компоненте са корисницима. Направите дугме, по клику на које ће се уклањати елементи из низа. Проверите да ли ће у детету компонентама бити активиран хук за уклањање.