@Input und @Output sind die standardmäßige Methode, wie Parent- und Child-Komponente kommunizieren: übergibt Daten (Parent → Child), und sendet Events (Child → Parent). Dies spiegelt das universelle Muster "props down, events up" wider.
@Input und @Output sind die standardmäßige Methode, wie Parent- und Child-Komponente kommunizieren: übergibt Daten (Parent → Child), und sendet Events (Child → Parent). Dies spiegelt das universelle Muster "props down, events up" wider.
@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>
Die Child emittiert über einen EventEmitter; die Parent bindet sich mit (eventName) daran und empfängt die Payload als $event. Das Child modifiziert die Daten der Parent nie direkt — es fordert eine Aktion durch Emittieren an.
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
Neuere Angular-Versionen fügen signalbasierte input()/output()-Funktionen als Alternative hinzu.
@Input/@Output sind das Herzstück der Parent-Child-Kommunikation und wiederverwendbarer Komponenten in Angular — sie erzwingen einen unidirektionalen Datenfluss (nach unten über Inputs, nach oben über Events), der Daten vorhersehbar und Komponenten entkoppelt hält.
Das Verständnis dieses Paares ist für die Zusammensetzung jeder nichttrivialen Angular-UI unerlässlich; für die Kommunikation zwischen unabhängigen Komponenten würde man stattdessen einen gemeinsamen Service oder eine State-Library verwenden.