TypeScript / Angular – Eventos

Bienvenidos sean a este post, hoy agregaremos una nueva interaccion en la pagina de inicio.

En este caso veremos como agregar un manejador de eventos para nuestro proyecto y este se encargara de agregar una opcion para poder filtrar entre las distintas ciudades donde estan las casas que disponemos, si bien la opcion ya existe aun no esta funcionando. Sino poseen el proyecto les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta todo listo para continuar. Nuestro primero paso sera ir a hogar.component.ts y en este agregaremos la siguiente linea en el bloque de exportacion de la clase:

listaViviendasFiltradas: Ubicacionviviendas[] = [];

Esta sera la encargada de almacenar las viviendas que «filtraremos» y debemos agregarla antes del constructor. Nuestro siguiente paso sera iniciarla y para ello modificaremos al constructor de la siguiente manera:

  constructor() {
        this.listaUbicacionViviendas = this.serviceViviendas
                                        .getTodasUbicaciones();
        this.listaViviendasFiltradas = this.listaUbicacionViviendas;
  }

En esta basicamente agregamos a la nueva propiedad que declaramos anteriormente y esta debe contener de manera inicial todos los valores, por esta razon le asignamos la propiedad anterior, pero ahora empezaremos con lo mas importante. Manteniendonos en el mismo archivo vamos a ir a la propiedad template en @Component y buscaremos la siguiente linea:

<input type="text" placeholder="Filtrar por ciudad">

Y la modificaremos de la siguiente manera:

<input type="text" placeholder="Filtrar por ciudad" #filter>

Esto que agregamos es lo que se denomina como template variable para poder acceder al valor del input. Lo siguiente que haremos sera ir a la siguiente linea:

<button class="primary" type="button">Buscar</button>

Y la modificaremos de la siguiente manera:

<button class="primary" type="button"
    (click)="filtrar(filter.value)">Buscar</button>

En este caso solo agregamos el evento click para cada vez que sea presionado llame a la funcion informada y le pasemos el valor que ingresamos en el input anterior, esto gracias al template variable que le asociamos, pero esto todavia no funcionara porque dicha funcion aun no existe. Pero de eso hablaremos en un momento, nuestro siguiente paso sera buscar la siguiente linea:

*ngFor="let ubicacionViviendas of listaUbicacionViviendas"

Y la modificaremos de la siguiente manera:

*ngFor="let ubicacionViviendas of listaViviendasFiltradas"

Aqui solamente cambiamos el listado de las viviendas del que estabamos usando al nuevo que generamos para realizar el filtrado, con todas estas modificaciones realizadas solo nos resta definir la funcion de filtrado. Para ello iremos nuevamente a la clase de este archivo y agregaremos el siguiente bloque de codigo:

  filtrar(texto: string) {
        if (!texto) {
          this.listaViviendasFiltradas = this.listaUbicacionViviendas;
          return;
        }
        this.listaViviendasFiltradas = this.listaUbicacionViviendas.filter(
                ubicacionViviendas => ubicacionViviendas?.ciudad
                        .toLowerCase().includes(texto.toLowerCase()));
  }

En este metodo primero tendremos un condicional donde verifica si texto esta vacio y en caso de ser verdadero establece a la lista filtrada con todos los valores posibles y sale del metodo. Si esta condicion no se cumple aplicaremos a la lista sin filtrar la funcion filter y aqui usaremos una funcion que devolvera el resultado de usar a includes que utilizara a texto para incluir solo las ciudades que contengan el dato y este sera el que utilice finalmente filter y sera almacenado en la lista filtrada. Con esto realizado ahora si tenemos la pagina funcional y podemos probarla de la siguiente manera:

Como pueden ver funciono perfectamente el filtrado por ciudad, ya sea pasando un valor o sin valor. Antes de finalizar les dejo un link con todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos visto como manejar eventos, como se aplican, como se utilizan y para ello usamos a nuestro proyecto, donde agregamos un evento de filtrado para nuestras viviendas mediante la ciudad. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.