65. Interaction entre composants : Décorateur Input

Les composants forment une hiérarchie (parent-enfant). Le moyen principal de transmettre des données vers le bas de l'arbre (du Parent vers l'Enfant) est d'utiliser le décorateur @Input().

1. Définir l'Input dans le composant Enfant

Le décorateur @Input() marque une propriété de la classe du composant enfant comme étant disponible pour une liaison par le template du parent.

typescript // product-detail.component.ts (L'Enfant) import { Component, Input } from '@angular/core';

interface Product { name: string; price: number; }

@Component({ /* ... */ }) export class ProductDetailComponent {

// Propriété qui recevra les données du parent @Input() productData: Product | undefined;

// On peut aussi aliasser le nom de l'input : @Input('stockLevel') quantity: number = 0;

get status() { return this.quantity > 0 ? 'En stock' : 'Rupture de stock'; } }

2. Passer des données depuis le composant Parent

Le composant parent utilise la liaison de propriété ([ ]) pour définir la valeur des propriétés Input de l'enfant.

typescript // parent.component.ts export class ParentComponent { selectedProduct: Product = { name: 'Widget Pro', price: 99.99 }; }

html

<app-product-detail [productData]="selectedProduct" [stockLevel]="15">

Note : Les Inputs ne doivent pas être privés. Si un objet est passé via @Input, le composant enfant doit le traiter comme immuable. Si l'enfant modifie l'objet, le parent ne sera pas notifié (sauf stratégie OnPush), ce qui peut causer des bugs difficiles à tracer.