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:

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

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

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

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

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

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

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