Event Binding en Angular

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

2 comentarios

  1. Howdy just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Opera.

    I’m not sure if this is a format issue or something to do with browser
    compatibility but I thought I’d post to let you know. The style
    and design look great though! Hope you get the problem fixed soon. Cheers

  2. Valuable information. Fortunate me I found your website accidentally,
    and I am surprised why this twist of fate didn’t came about
    in advance! I bookmarked it.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar