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.

Comment ça marche ? ​

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.

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>`
})
export class EnfantComponent {
  @Input() message: string = '';
}

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

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

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

Composant Parent (parent.component.ts) :

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

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

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

@Component({
  selector: 'app-parent',
  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 😃

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

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

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

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