@Input en @Output zijn de standaardmanier waarop een ouder- en onderliggende component communiceren: geeft gegevens door (ouder → onderliggende), en stuurt gebeurtenissen (onderliggende → ouder). Dit weerspiegelt het universele patroon "props down, events up".
@Input@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>
De onderliggende component zendt uit via een EventEmitter; de ouder bindt deze met (eventName) en ontvangt de payload als $event. De onderliggende component wijzigt de gegevens van de ouder nooit rechtstreeks — deze verzoekt actie door uit te zenden.
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
Recente Angular voegt signaal-gebaseerde input()/output() functies toe als alternatief.
@Input/@Output zijn de kern van ouder-onderliggende communicatie en herbruikbare components in Angular — ze dwingen eenrichtingsgegevensstroom af (via inputs naar beneden, via events naar boven) die gegevens voorspelbaar houdt en components ontkoppeld.
Het begrijpen van dit paar is essentieel voor het samenstellen van elke niet-triviale Angular UI; voor communicatie tussen niet-gerelateerde components zou u in plaats daarvan een gedeelde service of state library gebruiken.