Шаблонни променливи во 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.