Kétirányú adatkötés az Angular-ban

Az Angular-ban lehetőség van arra, hogy ahogy szöveget írunk be egy input mezőbe, az a szöveg automatikusan kerüljön az osztály egy tulajdonságába. Ezt nevezzük kétirányú adatkötésnek.

Ahhoz, hogy ez a kötés működjön, először be kell kapcsolni. Ehhez a komponens fájlban importáljuk a FormsModule-t:

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

Majd hozzáadjuk a imports tulajdonsághoz a @Component dekorátorban:

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

Ezek után a kétirányú adatkötés be lesz kapcsolva és használhatjuk is. Tegyük ezt meg.

Először deklaráljunk egy osztály tulajdonságot, amelyet ezután kétirányú kötésnek vetünk alá:

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

Tegyük fel, hogy van egy div-ünk és egy inputunk. A div-ben jelenítsünk meg egy osztály tulajdonságot:

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

Kössük a text tulajdonságunkat az input változásához. Ehhez az inputba egy speciális direktívát kell írnunk, a [(ngModel)]-t, aminek értékeként meg kell adnunk az osztályunk tulajdonságát:

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

Most, ha elindítjuk a kódot és elkezdünk szöveget írni az inputba, ez a szöveg azonnal megjelenik a div-ben.