Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Angular
  3. Las interacciones de usuario
Extrait - Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
Extractos del libro
Angular Desarrolle sus aplicaciones web con el framework JavaScript de Google
2 opiniones
Volver a la página de compra del libro

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...