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:

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

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

@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á:

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

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

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

Adott egy input és egy bekezdés. Az inputba egy szám van megjelenítve. Úgy kell beállítani, hogy ahogy számot írunk az inputba, a bekezdésben ennek a számnak a négyzete jelenjen meg.

Adott két input és egy bekezdés. Az inputokba számokat lehet beírni. Úgy kell beállítani, hogy a bekezdésben a beírt számok összege jelenjen meg.