Lifecycle Hooks: ngOnInit & ngOnDestroy

Penjelasan

Component Angular punya lifecycle hooks berupa method dengan nama TETAP yang otomatis dipanggil di titik tertentu, diimplementasikan lewat interface: ngOnInit() (dipanggil setelah component pertama kali diinisialisasi, cocok untuk fetch data awal) dan ngOnDestroy() (dipanggil sebelum component dihapus, cocok untuk cleanup).

Contoh Konsep

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-timer',
    standalone: true,
    template: `<p>Timer berjalan...</p>`,
})
export class TimerComponent implements OnInit, OnDestroy {
    private intervalId: any;

    ngOnInit() {
        console.log('Component pertama kali muncul');
        this.intervalId = setInterval(() => console.log('tick'), 1000);
    }

    ngOnDestroy() {
        clearInterval(this.intervalId); // cleanup, cegah memory leak
    }
}

Praktikum

Buat component yang mengimplementasikan OnInit dan OnDestroy. Di ngOnInit(), cetak "Komponen dimuat" ke console. Di ngOnDestroy(), cetak "Komponen dilepas" ke console.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Class HARUS eksplisit implements OnInit/OnDestroy untuk dapat dukungan type-checking TypeScript penuh — secara teknis Angular tetap memanggil ngOnInit()/ngOnDestroy() walau interface-nya tidak di-implements, tapi tanpa itu editor tidak bisa memberi peringatan kalau kamu salah tulis nama method-nya.