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',
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up Counter</button>
  `
})
export class CountComponent {
  @Input() n: number = 0;
  @Output() nChange: EventEmitter<number> = new EventEmitter();

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

}

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

@Component({
  selector: 'app-count',
  template: `
    <p>{{n}}</p>
    <button (click)="up()">Up Counter</button>
  `
})
export class CountComponent {
  @Input() n: number = 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 AngularJS. Voyez sur le composant parent :

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

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

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

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

@Component({
  selector: 'app',
  template: `
    <div>
      <p>{{val}}</p>
      <button (click)="up()">Up Parent</button>
      <count [(n)]="val"></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 :

html

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

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

Faire du double data-binding. ​

Faire du double data-binding.