@Input et @Output sont la façon standard pour qu'un composant parent et un composant enfant communiquent : passe les données (parent → enfant), et envoie les événements (enfant → parent). Cela reflète le modèle universel « props vers le bas, événements vers le haut ».
@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>
L'enfant émet via un EventEmitter ; le parent s'y lie avec (eventName) et reçoit le contenu sous forme de $event. L'enfant ne modifie jamais directement les données du parent — il demande une action en émettant.
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 récent ajoute les fonctions input()/output() basées sur les signaux comme alternative.
@Input/@Output sont au cœur de la communication parent-enfant et des composants réutilisables dans Angular — ils imposent un flux de données unidirectionnel (vers le bas via les inputs, vers le haut via les événements) qui maintient les données prévisibles et les composants découplés.
Comprendre cette paire est essentiel pour composer n'importe quelle interface utilisateur Angular non triviale ; pour la communication entre composants non liés, vous utiliseriez plutôt un service partagé ou une bibliothèque d'état.