Sablonváltozók az Angularban

Az Angularban hozzáférhetünk az oldal elemeihez sablonváltozók segítségével. Ezek lehetővé teszik, hogy egy elemet egy változóhoz kötöjünk és hivatkozzunk rá a komponens működése során. Egy ilyen változó deklarálásához a neve elé kell tenni a # jelet.

Nézzük a gyakorlatban. Tegyük fel, hogy van egy divünk. Írjuk be egy sablonváltozóba:

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

Most a userName változóban lesz egy referencia a divünk DOM elemére. És úgy hivatkozhatunk rá, ahogy az tiszta JavaScript-ben szoktuk. Például írjuk ki a div szövegét egy másik elemben:

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