Двустороннее связывание данных в Angular 2

Двустороннее связывание по-прежнему доступно в Angular 2 и ngModel делает его простым. Синтаксис является комбинацией из [input] и (output) синтаксиса для передачи данных в разных направлениях.

Итак, мы добавили код, для передачи сообщения через @Input, но теперь мы будем использовать ngModel нашего <input> элемента. Это выглядит как [(ngModel)] в квадратных скобках. Эта комбинация используется для двустороннего связывания, круглые скобки обозначают передачу значения наружу, квадратные скобки - передача внутрь через @Input.

simple-form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `<div>
{{message}}
<input #myInput type="text" [(ngModel)]="message">
<button (click)="onClick($event, myInput.value)">Нажми меня!</button>
</div>`,
  styles:[]
})

Можно воспринимать [(...)] как явное указание на двустороннее связывание. При изменении сообщения снаружи, новое значение сразу отобразится в <input>. Также при изменении значения <input>, значение переменной message обновится.

Работу байндинга можно легко увидеть на странице с примером. Просто нужно ввести текст в поле ввода и значение {{message}} тут же обновится.

Чтобы проверить привязку с другой стороны, добавим в конструктор setInterval, и будем изменять значения this.message как Math.random().toString() каждую секунду.

simple-form.component.ts

export class SimpleFormComponent implements OnInit {
  @Input() message;
  onClick(event, value) {
    console.log(event);
    console.log(value);
  }
  constructor() {
    setInterval(()=> this.message = Math.random().toString(), 1000);
  }
  ngOnInit(){ }
}

Теперь мы видим, что каждую секунду значения поля ввода и значения переменной обновляются вместе. Такой принцип работы для ngModel.