En artículos anteriores ya hablamos sobre que es Data Binding, concretamente sobre String interpolationProperty BindingClass Binding y Style Binding. Por lo que, si no conoces que es Data Binding, prefieres repasarlo o no lo tienes claro algunos de estos términos al 100 % te aconsejo la lectura de todos ellos.

En el artículo de hoy, vamos a explicar cómo hacer Data Binding mediante al conocido como Event Binding.

¿Qué es Event Binding?

Event Binding, es el mecanismo de data binding (envío de datos) mediante el cual vamos a trabajar con los eventos que se encuentran en el DOM.

En este caso, vamos a cambiar la dirección y el binding, se realizará desde el template (el HTML) hacía la lógica de negocio del componente (el TypeScript). Y no a la inversa como hasta ahora hemos visto.


¿Qué eventos podemos utilizar? ¿De dónde salen estos eventos? Todos los eventos definidos en el DOM, el listado completo lo podemos ver por ejemplo dentro de la web de W3Schools. Vamos a ver algunos:

El evento más famoso de todos es click que se realiza cuando hacemos pulsamos el botón izquierdo del ratón sobre un elemento.

Creando un proyecto sobre el que realizar el ejemplo

Vamos a ver un ejemplo. Para ello, creamos e iniciamos un proyecto:

Una vez creado el proyecto, nos situamos en él y lo abrimos con VCS:

Y finalmente arrancamos el proyecto:

Lo que nos abrirá una ventana con nuestra template inicial del proyecto:

Si ya tenéis un proyecto creado lo podéis reutilizar

Ejemplo saludo con botón y event binding

Vamos a hacer un evento que al hacer click sobre nuestro botón nos muestre una ventana de alerta y escriba Hola mundo:

Ejemplo de evento click con captura del evento ($event) con event binding

Si queremos capturar el evento, necesitamos utilizar un objeto que ya trae de forma predefinida Angular, conocido como $event (no puede llamarse con otro nombre), si le pasamos dicho parámetro a nuestra función:

Si hacemos click sobre el botón, y vamos al inspector, podremos ver que el console.log que hemos escrito en la lógica de nuestro componente nos arroja el evento MouseEvent junto a las propiedades de nuestro botón:

Entre dichos eventos tenemos muchísimos, algunos de ellos son:

  • pageX y pageY: nos retornan la coordenada horizontal (pageX) y vertical (pageY) del punto exacto donde se ha ejecutado el evento relativo a nuestra página HTML.
  • type: define el tipo de evento que hemos ejecutado, anteriormente hemos visto que era un MouseEvent un evento más genérico. Este es el evento en concreto.

Ejemplo desplazando un botón al hacer click con event binding

Si quisiéramos realizar un botón que se desplace al hacer click sobre él, podemos añadir un id y trabajar con getElementById desde nuestro TypeScript. Vamos a ver un ejemplo:

Cada vez que hagamos click, podemos ver que, el botón se desplaza 10 px hacía la derecha y aparece un mensaje por consola por cada click sobre el botón:

Esto es todo, nos vemos en próximas lecciones. Saludos