Variables de plantilla en Angular

En Angular se puede acceder a las etiquetas de la página mediante variables de plantilla. Estas permiten vincular una etiqueta a una variable y hacer referencia a ella durante el funcionamiento del componente. Para declarar dicha variable, hay que poner el símbolo # antes de su nombre.

Veámoslo en la práctica. Supongamos, por ejemplo, que tenemos un div. Guardémoslo en una variable de plantilla:

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

Ahora en la variable userName habrá una referencia al elemento DOM de nuestro div. Y podemos usarla tal como se hace en JavaScript puro. Por ejemplo, mostremos el texto de este div en otra etiqueta:

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