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:
<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:
<div>
{{ userName.textContent }}
</div>
Annettu div. Annettu kuva. Tallenna viittaus
kuvaan mallimuuttujaan. Tulosta
kuvamme src divin sisällä.
