Dvosmerno povezivanje podataka u Angularu

U Angularu je moguće postići da tekst koji se unosi u polje za unos, automatski bude upisan u svojstvo klase. Ovo se naziva dvosmerno povezivanje podataka.

Da bi ovo povezivanje funkcionisalo, prvo ga je potrebno omogućiti. Za ovo u fajlu komponente importujemo FormsModule:

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

Zatim ga dodajemo u svojstvo imports dekoratora @Component:

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

Nakon ovoga, dvosmerno povezivanje podataka će biti omogućeno i možemo ga koristiti. Hajde da to i uradimo.

Za početak, deklarišimo svojstvo klase koje ćemo potom podvrgnuti dvosmernom povezivanju:

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

Recimo da imamo div i input. Neka se u div-u prikazuje određeno svojstvo klase:

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

Hajde da povežemo naše svojstvo text sa promenama u polju za unos. Za ovo u input-u treba napisati specijalnu direktivu [(ngModel)], čija vrednost treba da bude svojstvo naše klase:

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

Sada, ako pokrenemo kod i počnemo da unosimo tekst u polje, taj tekst će odmah početi da se prikazuje u div-u.

Dat je input i paragraf. U input se unosi broj. Uradite tako da se tokom unosa broja u input, u paragrafu prikazuje kvadrat tog broja.

Data su dva input-a i paragraf. U input-e se unose brojevi. Uradite tako da se u paragrafu prikazuje zbir unetih brojeva.