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

В Angular можно получить доступ к тегам страницы с помощью шаблонных переменных. Они позволяют привязать тег к переменной и ссылаться на него во время работы компонента. Для того, чтобы объявить такую переменную, нужно перед ее именем поставить знак #.

Давайте посмотрим на практике. Пусть, к примеру, у нас есть див. Запишем его в шаблонную переменную:

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

Теперь в переменной userName будет лежать ссылка на DOM элемент нашего дива. И мы можем обращаться с ней так, как это делается в чистом JavaScript. Например, давайте выведем текст этого дива в другом теге:

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