Lifecycle hooks memungkinkan kamu menjalankan kode pada tahap tertentu dari kehidupan komponen.

Hooks Utama

export class MyComponent implements OnInit, OnDestroy, OnChanges {
  @Input() data = ""

  ngOnChanges(changes: SimpleChanges) {
    // Dipanggil saat @Input berubah
    console.log("Input berubah:", changes)
  }

  ngOnInit() {
    // Dipanggil sekali setelah konstruktor
    // Tempat fetch data, setup subscriptions
  }

  ngOnDestroy() {
    // Dipanggil saat komponen dihapus
    // Tempat cleanup (unsubscribe, clearInterval)
  }
}

Urutan Lifecycle dan Kapan Setiap Hook Dipanggil

1. constructor — Class komponen dibuat. Dependency injection terjadi di sini. Jangan pakai @Input() di constructor — nilainya belum ada.
2. ngOnChanges — Dipanggil sebelum ngOnInit, dan setiap kali @Input() berubah. Berguna untuk react ke perubahan input dari parent.
3. ngOnInit — Dipanggil sekali setelah ngOnChanges pertama. Tempat ideal untuk fetch data, setup subscription, baca route param.
4. ngAfterViewInit — View dan child component sudah siap di DOM. Tempat aman untuk akses @ViewChild, integrasi library third-party yang butuh elemen DOM.
5. ngOnDestroy — Tepat sebelum komponen dihapus. Tempat cleanup: unsubscribe Observable, clear interval, lepas event listener.

💡 Aturan praktis: fetch data di ngOnInit, akses DOM di ngAfterViewInit, cleanup di ngOnDestroy. Constructor hanya untuk DI dan field initialization.