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

В Angular можно сделать так, чтобы по мере ввода текста в инпут, этот текст автоматически попадал в свойство класса. Это называется двусторонняя привязка данных.

Чтобы такая привязка заработала, для начала ее необходимо включить. Для этого в файле компонента импортируем FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

А затем добавляем в свойство imports декоратора @Component:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

После этого двухсторонняя привязка данных будет включена и мы можем ей воспользоваться. Давайте сделаем это.

Для начала объявим свойство класса, которое мы затем подвергнем двухстороннему связыванию:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Пусть у нас есть див и инпут. Пусть в диве выводится некоторое свойство класса:

html<div>
  {{ text }}
</div>
<input>

Давайте привяжем наше свойство text к изменению инпута. Для этого в инпуте нужно написать специальную директиву [(ngModel)], значением которой следует указать свойство нашего класса:

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

Теперь, если запустить код и начать вводить текст в инпут, этот текст сразу же начнет отображаться в диве.