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:

import { FormsModule } from '@angular/forms';

Nato ga dodamo v lastnost imports dekoratorja @Component:

@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:

export class AppComponent {
	public text: string = '';
}

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

<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:

<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.

Podan je input in odstavek. V input je izpisano število. Naredite tako, da se med vnosom števila v input, v odstavku prikaže kvadrat tega števila.

Podana sta dva inputa in odstavek. V inputa se vnesejo števila. Naredite tako, da se v odstavku prikaže vsota vnešenih števil.