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

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

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

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

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

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

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

Дато је поље за унос и пасус. У поље за унос се уноси број. Урадите тако да током уноса броја у поље за унос, у пасусу буде приказан квадрат тог броја.

Дата су два поља за унос и пасус. У поља за унос се уносе бројеви. Урадите тако да у пасусу буде приказан збир унетих бројева.