Двонасочна врска на податоци во Angular

Во Angular може да се постигне тоа што, додека се внесува текст во полето за внесување, тој текст автоматски да се појавува во својството на класата. Ова се нарекува двонасочна врска на податоци.

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

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

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

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

Сега, ако се стартура кодот и започнете да внесувате текст во полето за внесување, тој текст веднаш ќе започне да се прикажува во div-от.

Дадени се поле за внесување и параграф. Во полето за внесување се прикажува број. Направете така што, додека се внесува бројот во полето за внесување, во параграфот да се прикажува квадратот на тој број.

Дадени се две полиња за внесување и параграф. Во полињата за внесување се внесуваат броеви. Направете така што во параграфот да се прикажува збирот на внесените броеви.