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

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

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

`import { FormsModule } from '@angular/forms';`

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

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

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

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

`export class AppComponent { public text: string = ''; }`

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

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

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

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

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

Дан инпут и абзац. В инпут выводится число. Сделайте так, чтобы по мере ввода числа в инпут, в абзаце отображался квадрат этого числа.

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

← →
↑