Event Filter en Angular

En el artículo anterior vimos, el Event Binding, en este, vamos a explicar como realizar un filtro sobre un Event Binding.

Imaginaos que queremos realizar un input de texto sobre el que no podamos pulsar la tecla de retroceso ni la tecla de suprimir y mostraremos una advertencia sobre un párrafo que cambiará su color a rojo y le echará bronca al usuario.

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

Obteniendo la información sobre las keys pulsadas con event binding

Mediante a los eventos (event binding) hemos visto el mecanismo para hacerlo. Para ello, primero realizamos un evento y revisamos que funciona cuando nos situamos encima del input con la consola del navegador abierta:

Si escribimos un carácter es nuestro input, podemos ver que tenemos varias maneras de trabajar sobre el evento keyup:

  • code: nos muestra el carácter junto a la descripción Key, en este caso KeyA.
  • key: nos muestra el carácter en si.
  • keyCode: nos muestra el número en ASCII si pulsamos alt y escribimos el número (en este caso el 65) nos aparecerá el carácter en la pantalla (en este caso A).

Si por ejemplo queremos saber cual es el keyCode de cada una de las teclas ya sabemos como sacarlo, con el console log tal y como lo tenemos, solamente tendremos que buscarlo desde la consola y finalmente desplegar el evento de KeyboardEvent.

Ejemplo de Event binding con keyCode

Si lo hacemos con keyCode, el resultado será:

Ejemplo de Event binding con key

También podemos usar directamente el key en vez del keyCode. Vamos a ver un ejemplo:

En ambos casos, el resultado será el mismo y será:

Ejemplo de Event Filter con key

Pero existe un mecanimos llamado Event Filter que nos permitiran filtrar directamente sobre nuestro template si nuestros eventos  cumplen una condición previamente antes de llegar al TypeScript y por tanto, no necesitaremos enviar un evento a nuestra función. Ya que, solamente entrará en dicha función cuando el evento keyUp sea igual a delete (suprimir) o backspace (retroceso).

Vamos a ver un ejemplo:

Espero que os haya gustado ¡Saludos!

3 comentarios

  1. Asking questions are really fastidious thing if you are
    not understanding anything fully, however this article presents pleasant understanding even.

  2. Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed surfing around your blog posts.
    In any case I will be subscribing to your rss feed and I hope you write again soon!

  3. This article gives clear idea designed for the new viewers of blogging, that really
    how to do blogging. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

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