Шаблонни променливи в Angular

В Angular можете да получите достъп до таговете на страницата с помощта на шаблонни променливи. Те позволяват да свържете таг с променлива и да се позовавате на него по време на работа на компонента. За да декларирате такава променлива, трябва да поставите знака # преди името й.

Нека да разгледаме на практика. Нека, например, имаме див. Нека го запишем в шаблонна променлива:

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

Сега в променливата userName ще има референция към DOM елемента на нашия див. И можем да се обръщаме към нея така, както това се прави в чист JavaScript. Например, нека изведем текста на този див в друг таг:

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