Two-way binding [()]

The [(x)] syntax is easy to demonstrate when the element has a settable property called x and a corresponding event named xChange.

Source

sizer.component.html

<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>

sizer.component.ts

export class SizerComponent {
  @Input() size: number;

  @Output() sizeChange = new EventEmitter<number>();

  dec() { 
    this.resize(-1); 
  }

  inc() { 
    this.resize(+1); 
  }

  resize(delta: number) {
    this.size = this.size + delta;
    this.sizeChange.emit(this.size);
  }
}

app.component.html

<sizer [(size)]="size"></sizer>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>

app.component.ts

export class AppComponent {
  size = 13;
}

Result

FontSize: 13px

It would be convenient to use two-way binding with HTML form elements like <input> and <select>. However, no native HTML element follows the x value and xChange event pattern.

Fortunately, the Angular NgModel directive is a bridge that enables two-way binding to form elements.