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:

app/app.component.tsimport { FormsModule } from '@angular/forms';

Zatim ga dodajemo u svojstvo imports dekoratora @Component:

app/app.component.ts@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:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

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

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

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