Dvosmerno povezovanje podatkov v Angular

V Angularju je mogoče narediti tako, da se med vnosom besedila v vnosno polje to besedilo samodejno prestavi v lastnost razreda. Temu pravimo dvosmerno povezovanje podatkov.

Da takšno povezovanje deluje, ga je najprej treba omogočiti. Za to v datoteki komponente uvozimo FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

Nato ga dodamo v lastnost imports dekoratorja @Component:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Po tem bo dvosmerno povezovanje podatkov omogočeno in ga lahko uporabimo. Poskusimo.

Za začetek deklarirajmo lastnost razreda, ki jo bomo nato podvrgli dvosmernemu povezovanju:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Recimo, da imamo div in input. Naj se v divu prikaže neka lastnost razreda:

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

Povežimo našo lastnost text s spremembo vnosnega polja. Za to je v inputu potrebno napisati posebno direktivo [(ngModel)], katere vrednost naj bo lastnost našega razreda:

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

Če zdaj zaženemo kodo in začnemo vnašati besedilo v vnosno polje, se bo to besedilo takoj pričelo prikazovati v divu.