Двупосочна свързаност на данни в 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 и поле за вход. Нека в div се извежда някакво свойство на класа:

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

Нека свържем нашето свойство text с промяната на полето за вход. За това в полето за вход трябва да напишем специална директива [(ngModel)], на чиято стойност трябва да посочим свойството на нашия клас:

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

Сега, ако стартираме кода и започнем да въвеждаме текст в полето за вход, този текст веднага ще се появи в div.

Дадени са поле за вход и абзац. В полето за вход се извежда число. Направете така, че докато се въвежда число в полето за вход, в абзаца да се показва квадратът на това число.

Дадени са две полета за вход и абзац. В полетата за вход се въвеждат числа. Направете така, че в абзаца да се показва сумата на въведените числа.