Ediciones ENI Editorial | líder en informática
Las interacciones de usuario
¿Qué es el event binding?
Cuando un usuario interactúa con un enlace, pulsa un botón, selecciona un evento de una lista desplegable o manipula el texto, es importante que la aplicación pueda reaccionar a estos diferentes eventos.
En un primer momento este capítulo explica el event binding (relación con el evento), que permite a una aplicación Angular ejecutar código y acciones cuando se produce un evento.
Es habitual tener un flujo donde el componente tendrá impacto en la vista, de acuerdo con su estado. Esta vez, se trata de un flujo donde la vista va a notificarle al componente una interacción.
El único medio para detectar las interacciones del usuario, es escuchar determinados eventos, como las pulsaciones del teclado, los movimientos del ratón, los clics, las manipulaciones táctiles, etc.
Por lo tanto, con el concepto de event binding la aplicación se suscribe a las diferentes interacciones.
Suscribirse a un evento
La sintaxis de un event binding es relativamente simple. Es suficiente con decorar con paréntesis el nombre del evento DOM a escuchar y proporcionar el método a ejecutar durante este evento. A continuación, se muestra un ejemplo básico que permite ejecutar el método doSomething cuando un usuario pulsa el botón en cuestión.
<button (click)="doSomething()">Pulse aquí</button> Aquí, el componente sabe que cuando el evento (click) se lance, hay que ejecutar el siguiente código: doSomething().
Una forma canónica también está disponible para el desarrollador. Es solo una diferencia sintáctica, no cambia los mecanismos internos.
<button on-click="doSomething()">Pulse aquí</button> En un binding, el código se ejecuta en el contexto del componente. Por lo tanto, se lanza el método doSomething del componente.
A continuación se muestra un ejemplo con un componente que, en su template, muestra un contador y tiene un botón que debe llamar al método incrementTotal.
import { Component } from '@angular/core';
@Component({
selector: 'app-input-sample',
template: `
<button (click)="incrementTotal()">Incrementar</button>
Total:...Recuperar una entrada de usuario
1. ¿Cómo manipular el objeto $event?
Los ejemplos anteriores solo utilizan el método click de un botón. Sin embargo hay varios tipos de eventos y principalmente aquellos que devuelven una entrada de usuario. El ejemplo más concreto es una tecla del teclado que pulsará el usuario.
Hay disponible un objeto en la variable $event proporcionada por Angular. Este objeto contiene el dato que queremos recuperar. Una primera solución es pasar este objeto $event a un método e ir a buscar en él la entrada de usuario.
En el siguiente ejemplo, sencillamente vamos a concatenar las entradas una por una, separándolas con una coma.
import { Component} from '@angular/core';
@ Component({
selector: 'app-input-keystroke',
template: `
<input (keyup)="onKeyUp($event)">
<p>{{keys}}</p>`
})
export class InputKeystrokeComponent {
keys = '';
onKeyUp(event:any)
{
this.keys += event.target.value + ',';
}
} El componente tiene un método onKeyUp, que toma como argumento el evento del navegador del que es posible recuperar el target.value, correspondiente al valor del input de cada evento. Este método onKeyUp se llama en el evento keyup del input, presente en el template del componente.
La estructura y la forma del objeto $event se definen mediante el elemento que dispara el evento. Aquí, el evento keyup viene del DOM, por lo tanto $event debe ser un modelo de evento del DOM. En este sentido, $event.target proporciona un HTMLInputElement, que contiene una propiedad value que contiene las entradas de usuario.
En el ejemplo anterior, el método onKeyUp es el que extrae el valor del objeto $event y va a manipular el dato.
Escribiendo abcd en el teclado, obtendremos el siguiente resultado en la salida:
a,ab,abc,abcd, 2. Utilizar un tipado fuerte para $event
En el ejemplo anterior, la firma del método onKeyUp es la siguiente:
onKeyDown(event:any) El argumento event no está tipado. Sin embargo, como TypeScript nos proporciona el tipado...