Variáveis de Template no Angular
No Angular, você pode acessar as tags da
página usando variáveis de template.
Elas permitem vincular uma tag a uma variável
e referenciá-la durante a execução do
componente. Para declarar tal variável,
é preciso colocar o símbolo # antes
do seu nome.
Vamos ver na prática. Suponha, por exemplo, que temos uma div. Vamos atribuí-la a uma variável de template:
<div #userName>
texto
</div>
Agora, a variável userName conterá
uma referência ao elemento DOM da nossa div.
E podemos usá-la da mesma forma que é
feito em JavaScript puro.
Por exemplo, vamos exibir o texto dessa div
em outra tag:
<div>
{{ userName.textContent }}
</div>
Dada uma div. Dada uma imagem. Atribua a referência
da imagem a uma variável de template. Exiba
o src da nossa imagem dentro da div.