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

У Angular-у је могуће приступити елементима странице користећи шаблонске променљиве. Оне омогућавају да се елемент веже за променљиву и да се на њу реферише током рада компоненте. Да би се декларисала таква променљива, потребно је пред њено име ставити знак #.

Хајде да погледамо на пракси. Нека, на пример, имамо div. Упишимо га у шаблонску променљиву:

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

Сада ће у променљивој userName бити референца на DOM елемент нашег div-а. И можемо му приступати онако како се то ради у чистом JavaScript-у. На пример, хајде да испишемо текст овог div-а у другом елементу:

app/app.component.html<div>
  {{ userName.textContent }}
</div>
Задание 1

Дат је div. Дата је слика. Упишите референцу на слику у шаблонску променљиву. Испишите src наше слике унутар div-а.