Итак, мы добавили код, для передачи сообщения через @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.
