Двусторонняя привязка данных в 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">

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

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

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