Variabili template in Angular

In Angular è possibile accedere ai tag della pagina utilizzando le variabili template. Esse consentono di associare un tag a una variabile e di farvi riferimento durante il funzionamento del componente. Per dichiarare una tale variabile, è necessario anteporre al suo nome il simbolo #.

Vediamo in pratica. Supponiamo, ad esempio, di avere un div. Assegniamolo a una variabile template:

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

Ora nella variabile userName ci sarà un riferimento all'elemento DOM del nostro div. E possiamo utilizzarlo come si fa in JavaScript puro. Ad esempio, visualizziamo il testo di questo div in un altro tag:

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