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:

app/app.component.html<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:

app/app.component.html<div>
  {{ userName.textContent }}
</div>