Faire du double data-binding.

Le double data-binding consiste à mettre à jour une variable peu importe où l'information a été modifiée.

Par exemple, si nous avons le nom de l'utilisateur affiché sur les deux composants A et B. Si on modifie le nom sur A, il le sera aussi sur B et réciproquement.

En fait, nous avons une entrée et une sortie.

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

@Component({
  selector: 'app-count',
  standalone: true,
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up Counter</button>
  `
})
export class CountComponent {
  @Input() n = 0;
  @Output() nChange: EventEmitter<number> = new EventEmitter();

  up() {
    this.n++;
    this.nChange.emit(this.n);
  }
}

Le composant du compteur ne change pas vraiment. Nous avons juste ajouté le décorateur Input pour récupérer la valeur en entrée.

Lorsque vous faites du data-binding, la propriété de sortie est le même nom que la propriété d'entrée suffixée de Change. Par exemple, ici :

• Propriété d'entrée : n
• Propriété de sortie : nChange

Pourquoi ? Car nous n'indiquerons pas l'attribut nChange dans le template. Cela se fera automatiquement par Angular. Voyez sur le composant parent :

import { Component } from '@angular/core';
import { CountComponent } from './count.component';

@Component({
  selector: 'app',
  imports: [CountComponent],
  template: `
    <div>
      <p>{{val}}</p>
      <button (click)="up()">Up Parent</button>
      <app-count [(n)]="val"></app-count>
    </div>
  `
})
export class AppComponent {
  val: number = 0;

  up() {
    this.val++;
  }
}

Remarquez que nous retrouvons le bouton qui incrémente la propriété val. Cette dernière est propre au composant AppComponent. Regardez que nous faisons du data-binding en combinant l'entrée et la sortie : [(n)]. Ainsi, si vous cliquez sur l'un des boutons, la valeur se synchronise.

Cela revient à faire :

  <app-count (n)="val" [nChange]="up()"></app-count>