Zmienne szablonowe w Angular

W Angular można uzyskać dostęp do tagów strony za pomocą zmiennych szablonowych. Pozwalają one powiązać tag ze zmienną i odnosić się do niego podczas pracy komponentu. Aby zadeklarować taką zmienną, należy przed jej nazwą postawić znak #.

Spójrzmy na praktyce. Załóżmy, na przykład, że mamy div. Zapiszmy go w zmiennej szablonowej:

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

Teraz w zmiennej userName będzie znajdować się referencja do DOM elementu naszego div. I możemy się do niej odnosić tak, jak to się robi w czystym JavaScript. Na przykład, wypiszmy tekst tego div w innym tagu:

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