Como funcionan los eventos en Angular 2

En este tutorial vamos a ver cómo funcionan los eventos en Angular 2.

Veamos como Angular escucha eventos del DOM en elementos HTML como input y button.

Enlaces de datos del tipo Evento

Como sabemos, en Angular podemos tener enlaces de datos del tipo evento y del tipo propiedad. Para hacer un enlace de datos del tipo evento (sobre un elemento del DOM) usamos los paréntesis redondos ‘( )’.

El siguiente ejemplo es un enlace de datos sobre el evento click:

Cuando el evento DOM que se encuentra dentro de los paréntesis es detectado, Angular corre la expresión dentro de las comillas.
La expresión dentro de las comillas se conoce como una declaración de plantilla y estas declaraciones van a correr algún código. En nuestro ejemplo estamos corriendo el método nuestraFuncion (que se debe encontrar en el componente) y le pasamos el objeto $event. Este objeto $event es el evento del DOM que estamos escuchado, en este caso, ya que estamos esperando un evento click el objeto $event tendrá un objeto del tipo MouseEvent.

Un objeto del tipo MouseEvent tiene varias propiedades como:

MouseEvent.altKey – Retorna true si la tecla alt fue presionada cuando ocurrió el evento
MouseEvent.ctrlKey – Retorna true si la tecla control fue presionada cuando ocurrió el evento
MouseEvent.button – Retorna el número del botón que fue oprimido cuando ocurrió el evento (1: principal, 2: auxiliar, 3: secundario …)
MouseEvent.clientX – La coordenada X del apuntador del mouse en coordenadas locales
MouseEvent.clientY – La coordenada Y del apuntador del mouse en coordenadas locales

Y muchos más, puedes ver la lista completa en la página de Mozilla Network Developer – MouseEvent.

En el siguiente ejemplo puedes ver cómo funcionan los eventos en Angular 2, en este caso usamos solo eventos del mouse.

Los eventos del teclado funcionan de la misma manera:

Un objeto del tipo KeyboardEvent tiene varias propiedades como:

KeyboardEvent.altKey – Retorna true si la tecla alt fue presionada cuando ocurrió el evento
KeyboardEvent.ctrlKey – Retorna true si la tecla control fue presionada cuando ocurrió el evento
KeyboardEvent.key – Retorna una cadena de caracteres del tipo DOMString con el valor de la tecla representada en el evento.

Puedes ver la lista completa en la página de Mozilla Developer Network – KeyboardEvent.

Para aprender más sobre Eventos en Angular 2 toma nuestro curso.

 

12 Enero, 2017

0 respuestas en "Como funcionan los eventos en Angular 2"

Deja un mensaje

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

Aprende Fácilmente© Todos los derechos reservados