Skabelonvariabler i Angular

I Angular kan man få adgang til sidernes tags ved hjælp af skabelonvariabler. De tillader at binde et tag til en variabel og henvise til det under komponentens arbejde. For at deklarere sådan en variabel, skal man sætte tegnet # foran dens navn.

Lad os se på det i praksis. Lad os for eksempel antage, at vi har en div. Lad os gemme den i en skabelonvariabel:

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

Nu vil variablen userName indeholde en reference til vores divs DOM-element. Og vi kan arbejde med den på samme måde, som det gøres i ren JavaScript. For eksempel, lad os udskrive teksten fra denne div i et andet tag:

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