Mallimuuttujat Angularissa

Angularissa voit päästä käsiksi sivun tunnisteisiin käyttämällä mallimuuttujia. Ne mahdollistavat tunnisteen sitomisen muuttujaan ja viittaamisen siihen komponentin toiminnan aikana. Tällaisen muuttujan määrittelemiseksi sen nimen eteen on asetettava merkki #.

Katsotaan käytännössä. Oletetaan esimerkiksi, että meillä on div. Tallennetaan se mallimuuttujaan:

app/app.component.html<div #userName>
  text
</div>

Nyt muuttuja userName sisältää viittauksen div-elementtiimme DOM:ssa. Ja voimme käsitellä sitä samalla tavalla kuin puhtaassa JavaScriptissä. Esimerkiksi tulostetaan tämän divin teksti toisessa tunnisteessa:

app/app.component.html<div>
  {{ userName.textContent }}
</div>