Двупосочна свързаност на данни в 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 = '';
}

Нека имаме div и поле за вход. Нека в div се извежда някакво свойство на класа:

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

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

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

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