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:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Sambungkan ke kelas:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

Dan sekarang tulis hook kita:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}