Utiliser @Input pour communiquer avec un composant enfant

L'un des principaux avantages d'Angular est sa modularité. On peut facilement diviser une application en composants réutilisables. Pour que ces composants puissent travailler ensemble, il est souvent nécessaire qu'ils puissent communiquer entre eux. Le décorateur @Input() est l'un des moyens d'établir cette communication, en particulier du composant parent vers le composant enfant.

Qu'est-ce que @Input() ?

Le décorateur @Input() permet à un composant enfant d'accepter une valeur passée depuis son composant parent.

Imaginez que nous ayons un composant Parent qui contient un composant Enfant. Si le composant Parent veut passer une valeur au composant Enfant, il peut le faire en utilisant la syntaxe de binding de propriété d'Angular. Voici uin exemple simple :

Composant Enfant (enfant.component.ts) :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `<h3>Message de mon parent: {{ message }}</h3>`,
  standalone: true
})
export class EnfantComponent {
  @Input() message = '';
}

Ici, le composant Enfant attend un message de son parent.

Composant Parent (parent.component.ts) :

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

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  standalone: true,
  template: `
    <div>
      <h2>Je suis le composant Parent</h2>
      <app-enfant [message]="monMessage"></app-enfant>
    </div>
  `
})
export class ParentComponent {
  monMessage = "Salut Enfant!";
}

Dans le composant Parent, nous avons défini un message, monMessage, et nous le passons au composant Enfant à l'aide de la syntaxe de binding de propriété : [message]="monMessage".

En fait, en mettant @Input() sur la propriété, on vient tout simplement de créer un attribut HTML qui s'appelle message et qui est lié à la propriété message du composant 😃

Bonnes pratiques 👍

• Utilisez les décorateurs de classe @Input() et @Output() au lieu des propriétés inputs et outputs des métadonnées @Directive et @Component (voir Angular Style Guide).
• Évitez les alias d'entrée et de sortie, sauf s'ils servent un objectif important (Exemple: @Input('aliasMessage') message: string = '';). Les alias peuvent rendre le code plus difficile à lire et à comprendre. (Voir Angular Style Guide).
• Initialisez les propriétés d'entrée avec une valeur par défaut (Exemple: @Input() message: string = '';). Cela permet d'éviter les erreurs si la valeur n'est pas définie dans le composant parent. (Voir Angular Style Guide)

Angular 16+

Si vous utilisez Angular 16+ et qu'il propose une fonctionnalité pour définir des entrées requises à l'aide de la décoration @Input, voici comment cela pourrait fonctionner d'après votre code :

import { Component, Input } from '@angular/core';

@Component({...})
export class App {
  @Input({ required: true }) title: string = '';
}

Dans cet exemple, vous utilisez la décoration @Input() avec une option required: true pour déclarer que la propriété title est requise.