В app.module.ts импортируем модуль @angular/forms (1) В imports прописываем добавленный модуль (2)
...
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; (1)
...
@NgModule({
declarations: [
AppComponent,
DateComponent
],
imports: [
...,
FormsModule (2)
],
providers: [],
bootstrap: [AppComponent]
})
...
<input type="text" [(ngModel)]="text" /> (3)
<p>{{text}}</p>
export class DateComponent implements OnInit {
text: string = "Hello world"; (4)
constructor() {
}
В шаблоне создаем двунаправленный бандинг при помощи директивы ngModel (3). Нужно обратить на синтаксис [(ngModel)], иначе работать не будет. А в классе компонента определяем переменную text (4).
Альтернатива двустороннему бандингу.
Прочитав некоторые статьи, двусторонний бандинг считается «тяжелой» операцией. Как альтернатива ему можно применять следующий код:
<input #newInput type="text" /> (1)
<button (click)="add(newInput.value)">add</button> (2)
export class DateComponent implements OnInit {
...
add(val:string) { (3)
console.log(val);
}
...
В input элемент добавляется специальный «атрибут»
(1), который начинается в символа #. После этого символа задается имя поле (грубо, ID), а потом параметр данного поля передаем в функцию (2). В коде component’а создаем обработчик для функции (3).
