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

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

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

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