Component Communication: @Input & @Output
Penjelasan
@Input() menandai properti class supaya bisa diisi dari LUAR component (dari induk, lewat property binding) — setara props di React/Vue. @Output() dipasangkan dengan EventEmitter untuk mengirim event kembali ke induk — setara emit di Vue atau callback props di React.
Contoh Konsep
// tombol-suka.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-tombol-suka',
standalone: true,
template: `<button (click)="handleKlik()">Suka</button>`,
})
export class TombolSukaComponent {
@Input() judul = '';
@Output() disukai = new EventEmitter<Date>();
handleKlik() {
this.disukai.emit(new Date());
}
}
// Dipakai di template induk:
// <app-tombol-suka [judul]="'Artikel Pertama'" (disukai)="handleDisukai($event)" />Praktikum
Buat component KartuProdukComponent dengan @Input() nama (string) dan @Output() ditambahkan (EventEmitter<void>) yang di-emit saat tombol "Tambah ke Keranjang" diklik. Tulis contoh pemakaiannya di template induk dengan [nama] dan (ditambahkan).
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Properti @Output() SELALU harus di-inisialisasi dengan new EventEmitter<TipeData>() saat dideklarasikan — beda dengan @Input() yang cukup diberi nilai default biasa (atau dibiarkan undefined lewat tanda tanya), @Output() butuh instance EventEmitter yang benar-benar ada supaya emit() bisa dipanggil.