Template Variables in Angular
In Angular, you can access page tags using template variables. They allow you to bind a tag to a variable and reference it while the component is running. To declare such a variable, you need to put the # sign before its name.
Let's look at it in practice. Let's say we have a div. Let's write it into a template variable:
<div #userName>
text
</div>
Now the variable userName will contain a reference to the DOM element of our div. And we can handle it as it is done in pure JavaScript. For example, let's display the text of this div in another tag:
<div>
{{ userName.textContent }}
</div>
Given a div. Given an image. Write the link to the image to a template variable. Output src of our image inside the div.
