@Input dan @Output adalah cara standar komponen parent dan child berkomunikasi: @Input mengirim data (parent → child), dan mengirim event (child → parent). Ini mencerminkan pola universal "props down, events up".
@Input dan @Output adalah cara standar komponen parent dan child berkomunikasi: @Input mengirim data (parent → child), dan mengirim event (child → parent). Ini mencerminkan pola universal "props down, events up".
@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
Child memancarkan melalui EventEmitter; parent mengikatnya dengan (eventName) dan menerima payload sebagai $event. Child tidak pernah memodifikasi data parent secara langsung — ia meminta aksi dengan memancarkan.
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
Angular terbaru menambahkan fungsi berbasis signal input()/output() sebagai alternatif.
@Input/@Output adalah inti komunikasi parent-child dan komponen yang dapat digunakan kembali di Angular — mereka menegakkan aliran data satu arah (ke bawah melalui inputs, ke atas melalui events) yang membuat data dapat diprediksi dan komponen terisolasi.
Memahami pasangan ini sangat penting untuk menyusun UI Angular yang tidak trivial; untuk komunikasi antar komponen yang tidak terkait, Anda sebaliknya menggunakan shared service atau state library.