Arvojen sitominen DOM-elementtien ominaisuuksiin Angularissa

Angularissa erotetaan kahta tyyppiä arvojen sitomista tageihin: tagin attribuuttiin ja DOM-elementin ominaisuuteen. Yleensä ne ovat sama asia, mutta joskus sillä on merkitystä.

Katsotaanpa näitä kahta tapaa esimerkkien avulla. Oletetaan, että meillä on seuraava luokan ominaisuus:

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

Esitetään tämän ominaisuuden arvo textarea-tekstissä

app/app.component.html<textarea>{{ text }}</textarea>

Ja nyt placeholder-attribuuttiin:

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

Ja nyt kirjoitetaan data nimenomaan DOM-elementin ominaisuuteen. Tätä varten otamme attribuutin nimen hakasulkeisiin:

app/app.component.html<textarea [value]="text"></textarea>