Variabile de șablon în Angular

În Angular puteți accesa tagurile paginii cu ajutorul variabilelor de șablon. Ele permit legarea unui tag la o variabilă și referirea la acesta în timpul funcționării componentei. Pentru a declara o astfel de variabilă, trebuie să puneți înaintea numelui său semnul #.

Să privim în practică. Să presupunem, de exemplu, că avem un div. Să îl scriem într-o variabilă de șablon:

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

Acum în variabila userName va fi o referință către elementul DOM al div-ului nostru. Și putem să interacționăm cu ea așa cum se face în JavaScript simplu. de exemplu, să afișăm textul acestui div într-un alt tag:

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