Una variable de referencia de plantilla es una referencia a un elemento o directiva del DOM dentro de una plantilla.
Se declara utilizando el prefijo # o bien la etiqueta ref- as dentro del elemento html.
Un ejemplo típico es un elemento input text del cual podemos obtener su valor accediendo a la propiedad value.
En el siguiente ejemplo obtenemos un número de teléfono y mostramos un mensaje cuando se hace click en un botón.
En el ejemplo anterior "telefono" hace referencia a un HTMLElement por lo que podemos acceder a todas sus propiedades y métodos de cualquier HTMLElement (id, name, value, etc.)
Esto puede resultarnos útil en ocasiones en las que no necesitamos crear un formulario para obtener el valor de un único elemento, como en el ejemplo anterior.
Sin embargo, con las Template Reference Variables podemos ir "más lejos"y referenciar también a un componente.
Imaginemos por ejemplo que tenemos un componente como el HelloComponent que crea por defecto stackblitz al que le hemos añadido tres variables privadas (para el nombre, apellido y email), y un método público que unicamente devuelve el email.
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
private nombre: string= 'Jorge';
private apellido: string = 'Trigueros';
private mail: string ='jorge.trigueros@gmail.com';
public mostrarEmail(){
return this.mail;
}
}
Podríamos referenciar el componente como una variable de referencia de plantilla de igual manera que como hemos hecho anteriormente con el HTMLElement, es decir:
<hello #hola></hello>
y de esta forma acceder tanto a las propiedades como a los métodos de dicho componente, tanto si son declarados privados como públicos.
Es decir, podemos hacer lo siguiente:
<hello #hola></hello>
{{hola.nombre}} {{hola.apellido}}
{{hola.mostrarEmail()}}
De esta forma estamos accediendo tanto a las variables privadas del componente como al método que muestra el email accediendo "a través" de la variable de referencia del componente!!!
El resultado es el que se muestra en la pantalla siguiente:
Si bien no es la mejor forma de acceder a las variables y propiedades de un componente, en ocasiones se trata de una forma rápida que nos puede resultar de utilidad en determinados casos.
Espero que esta entrada haya servido para conocer un poco mejor las Template Reference Variables.
