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:
<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:
<div>
{{ userName.textContent }}
</div>
Dato un div. Data un'immagine. Assegna il riferimento
all'immagine a una variabile template. Visualizza
src della nostra immagine all'interno del div.