Cuando trabajamos sobre un elemento HTML de un template, existe una alternativa a utilizar el objeto $event sobre la función en la que trabajaremos con el evento, dicha alternativa recibe el nombre de Template Variable.

Ejemplo con Event binding

Si por ejemplo quisiera obtener el valor de un input mediante el objeto $event, podría hacer algo similar a lo siguiente:


Ejemplos con Template Variable

En cambio, Template Variable (o variable de referencia de plantilla) nos va a permitir hacer referencia hacía elemento del DOM, sobre el que estamos trabajando sin tener que pasarle un $event. Vamos a ver un ejemplo:

Para realizar un Template variable utilizamos el símbolo de # dentro de la plantilla.

Vamos a ver un ejemplo:

Si nos fijamos estamos accediendo al elemento con tan solo poner la almohadilla # junto a un nombre y pasandoselo por parametro a la función que ejecutaremos cuando se realice el evento. El resultado será:

Si queremos acceder al valor, podriamos utilizar e.target.value como hemos hecho anteriormente:

O bien, utilizar el nombre del template acompañado de value:

Ambos nos darán el mismo resultado que será:

Ejercicio con Template View

Vamos a hacer un input de tipo password en el que solamente cuando introduzcamos un valor nos aparezca el botón de ver password y si lo pulsamos se muestre un alert con la contraseña. En el caso de que borremos la contraseña al completo, el botón desaparecerá y mostraremos un mensaje la consola del navegador.

Un ejemplo de esto podría ser:

Nos aparece solo el input (sin el botón)

Introducimos un password y nos ofrece la posibilidad de ver dicho password:

Pulsamos el botón y nos muestra el password:

Ocultamos el botón en el caso que no tengamos un password añadido y además mostramos un mensaje por consola:

Esto es todo, espero que os haya gustado, como habéis visto, Template View, nos proporciona otra manera de trabajar con los eventos sin utilizar el objeto $view. Un saludo