Hook ngOnDestroy di Angular

Hook ngOnDestroy dipicu ketika komponen dihapus. Dalam hook ini, Anda dapat membebaskan resource, menghapus langganan peristiwa elemen, menghentikan timer, dll.

Pembuatan dan penghapusan komponen di Angular terjadi ketika komponen tersebut secara reaktif ditampilkan dan disembunyikan menggunakan kondisi if. Artinya Angular tidak hanya menyembunyikan komponen, tetapi menghapusnya dan mengembalikannya kembali.

Komponen juga dibuat dan dihapus, ketika komponen tersebut diulang secara reaktif dalam loop. Dalam hal ini Angular juga membuat dan menghapus komponen.

Mari kita coba dalam praktik. Impor interface OnDestroy:

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

Sambungkan ke kelas:

export class UserComponent implements OnDestroy {
	
}

Dan sekarang tulis hook kita:

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

Buatlah if reaktif dengan bantuan yang akan menampilkan komponen anak. Periksa kerja hook yang telah dipelajari.

Di komponen induk diberikan array nama pengguna. Buat komponen anak dengan pengguna. Ulangi array dengan loop dan tampilkan komponen dengan pengguna. Buat tombol, yang saat ditekan akan menghapus elemen dari array. Periksa bahwa dalam komponen anak akan dipicu hook pada penghapusan.