Angular
Communication

Le décorateur @Input()

Dans Angular, les composants sont comme des Lego. Pour passer une donnée d'un grand Lego (le parent) à un petit Lego (l'enfant), on utilise une porte d'entrée : le décorateur @Input().

Composant Parent (Le Magasin)

Test6Component

Le parent possède une liste de catégories dans son TypeScript. Il va utiliser le composant enfant <app-enfant6> comme une simple balise HTML et lui "injecter" la donnée en utilisant les crochets [data]="categorie".

ID : 1
Accessoires
Reçu via @Input
ID : 2
Vestes
Reçu via @Input
ID : 3
Pantalons
Reçu via @Input
ID : 4
Chemises
Reçu via @Input
ID : 5
Robes
Reçu via @Input

Comment brancher les fils ?

1. Chez l'Enfant (La Prise)

L'enfant déclare qu'il est prêt à recevoir une donnée nommée data grâce à @Input().

@Input() data: Categorie;
2. Chez le Parent (La Fiche)

Le parent appelle l'enfant dans son HTML et branche la variable avec des crochets [ ].

<app-enfant [data]="maVariable">

Le Code Source Complet

import { Component } from '@angular/core';
import { EnfantComponent } from './enfant.component';

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  template: `
    <h3>Mes Catégories (Parent)</h3>
    
    <!-- On boucle sur nos catégories et on passe chaque 'cat' à l'enfant -->
    @for (cat of categories; track cat.id) {
      <app-enfant [data]="cat"></app-enfant>
    }
  `
})
export class ParentComponent {
  // Les données sont générées par le parent
  categories = [
    { id: 1, nom: "Accessoires" },
    { id: 2, nom: "Vestes" },
    { id: 3, nom: "Pantalons" }
  ];
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <div class="card">
      <h4>{{ data.nom }}</h4>
      <small>ID: {{ data.id }}</small>
    </div>
  `
})
export class EnfantComponent {
  // L'enfant attend patiemment de recevoir sa 'data' depuis le parent
  @Input() data: any;
}