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

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

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

<div #userName>
	text
</div>

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

<div>
	{{ userName.textContent }}
</div>

Дан див. Дана картинка. Запишите ссылку на картинку в шаблонную переменную. Выведите src нашей картинки внутри дива.