Angular: Jak stworzyć wiązanie dwukierunkowe?

Angular udostępnia sposób przekazywania danych między komponentami: rodzic-dziecko zwany: wiązanie dwukierunkowe (ang.: two-way binding).

Wiązanie jednokierunkowe pozwala na przekazanie danych od rodzica do dziecka. Jeśli u rodzica te dane się zmienią, to zostaną od razu przekazane do dziecka. Z kolei wiązanie dwukierunkowe umożliwia wymianę danych w obu kierunkach: rodzic <--> dziecko. Czyli jeśli zmienimy dane komponecie dziecko, to komponent rodzic także te zmiany odbierze.

Składania

Jednokierunkowe wiązanie:

HTML:

<child [data]="data"></child>

Dwukierunkowe wiązanie:

HTML:

<child [(data)]="data"></child>

Dwukierunkowe wiązanie przykład

Komponent rodzic

parent.component.html:

<div>Counter(parent): <strong>{{ counter }}</strong></div>

<child [(counter)]="counter"></child>

parent.component.ts:

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

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {

  public counter: number = 10;
}

Komponent dziecko

child.component.html:

<div>Counter(child): <strong>{{ counter }}</strong></div>
<button (click)="increment()">Incremenet</button>
<button (click)="decrement()">Decremenet</button>

child.component.ts:

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
})
export class ChildComponent {

  @Input()
  counter: number = 0;

  @Output()
  counterChange: EventEmitter<number> = new EventEmitter<number>();

  public increment() {
    this.counter += 1;
    this.counterChange.emit(this.counter);
  }

  public decrement() {
    this.counter -= 1;
    this.counterChange.emit(this.counter);
  }
}

Wystarczy poklikać w przyciski. Zmian widać zarówno u rodzica, jak i dziecka.