Двосмерно везивање података у Angular

У Angular-у је могуће урадити тако да током уноса текста у поље за унос, тај текст аутоматски буде постављен у својство класе. Ово се зове двосмерно везивање података.

Да би такво везивање почело да ради, најпре је потребно да га омогућимо. За то у фајлу компоненте увозимo 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 и input елемент. Нека у div-у буде приказано неко својство класе:

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

Хајде да вежемо наше својство text за промену вредности инпута. За то у инпуту треба написати специјалну директиву [(ngModel)], чија вредност треба да буде постављена на својство наше класе:

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

Сада, ако покренемо код и почнемо да уносимо текст у инпут, тај текст ће одмах почети да се приказује у div-у.