Dvojsmerné viazanie dát v Angular

V Angular je možné dosiahnuť, aby sa text zadaný do vstupného poľa automaticky premietol do vlastnosti triedy. Toto sa nazýva dvojstranné viazanie dát.

Aby toto viazanie fungovalo, je potrebné ho najprv povoliť. Na to v súbore komponentu importujeme FormsModule:

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

A potom ho pridáme do vlastnosti imports dekorátora @Component:

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

Potom bude dvojstranné viazanie dát povolené a môžeme ho použiť. Poďme to urobiť.

Najprv deklarujme vlastnosť triedy, ktorú budeme neskôr viazať dvojstranným spôsobom:

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

Predpokladajme, že máme div a input. Nech sa v dive zobrazuje nejaká vlastnosť triedy:

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

Poďme viazať našu vlastnosť text k zmene vstupného poľa. Na to je potrebné do inputu napísať špeciálnu direktívu [(ngModel)], ktorej hodnotou by mala byť uvedená vlastnosť našej triedy:

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

Teraz, ak spustíme kód a začneme zadávať text do vstupného poľa, tento text sa okamžite začne zobrazovať v dive.

Je dané vstupné pole a odsek. Do vstupného poľa sa zadáva číslo. Zabezpečte, aby sa v odseku zobrazoval štvorec tohto čísla počas jeho zadávania.

Sú dané dve vstupné polia a odsek. Do vstupných polí sa zadávajú čísla. Zabezpečte, aby sa v odseku zobrazoval súčet zadaných čísel.