Kahdensuuntainen datan sitominen Angularissa

Angularissa voidaan tehdä niin, että tekstin kirjoittamisen yhteydessä input-kenttään, tämä teksti automaattisesti päätyy luokan ominaisuuteen. Tätä kutsutaan kahdensuuntaiseksi datan sitomiseksi.

Jotta tällainen sitoma toimisi, se on aluksi käytettävä. Tätä varten tuodaan komponenttitiedostoon FormsModule:

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

Ja sitten lisätään se imports-ominaisuuteen @Component-dekoraattorissa:

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

Tämän jälkeen kahdensuuntainen datan sitominen tulee käyttöön ja voimme hyödyntää sitä. Tehdäänpä niin.

Aluksi määritellään luokan ominaisuus, joka altistamme sitten kahdensuuntaiselle sidonnalle:

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

Oletetaan, että meillä on div ja input. Olkoon divissä esitettynä tietty luokan ominaisuus:

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

Sidotaanpa ominaisuutemme text inputin muutoksiin. Tätä varten inputiin täytyy kirjoittaa erityiskomento [(ngModel)], jonka arvoksi tulee määrittää luokkamme ominaisuus:

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

Nyt, jos käynnistämme koodin ja alamme kirjoittamaan tekstiä input-kenttään, tämä teksti alkaa välittömästi näkyä divissä.

Annettu input ja kappale. Inputiin syötetään luku. Tee niin, että luvun syöttämisen yhteydessä input-kenttään, kappaleessa näytetään tämän luvun neliö.

Annettu kaksi input-kenttää ja kappale. Input-kenttiin syötetään lukuja. Tee niin, että kappaleessa näytetään syötettyjen lukujen summa.