Desde que apareció la versión 2 de Angular, rompiendo completamente con lo que había sido AngularJS, ha habido que ir cambiando la forma de pensar a la hora de crear una aplicación, y uno de los cambios más drásticos ha sido el de los filtros. Algo que en AngularJS era muy sencillo ahora se ha complicado un poco, pero ofreciendo un gran potencial. Os vamos a mostrar cómo crear un filtro de búsqueda por palabras desordenadas a partir de un pipe.
Crear un filtro de búsqueda por palabras desordenadas
En indexDesarrollo en los proyectos de desarrollo web con Angular solemos trabajar con Angular Cli, una interfaz por línea de comando que agiliza mucho el trabajo a la hora de llevar a cabo un proyecto en Angular, por lo que todo lo que hagamos para crear el filtro de búsqueda por palabras desordenadas será siguiendo esta herramienta.
El método de trabajo con filtros en Angular es a través de pipes, ya no es de forma tan automática como en el antiguo AngularJS (aunque para la búsqueda por palabras desordenadas también había que hacer cierto trabajo). Los pipes tienes más utilidades además de filtrar, también se pueden utilizar para crear formatos o muchas cosas que se os puedan ocurrir.
Lo primero, crear el pipe
Para crear un nuevo pipe desde Angular Cli solo hay que generarlo desde línea de comando dentro del proyecto:
Donde «filtro» es el nombre que le vamos a poner al pipe.
Una vez hecho esto se nos habrá creado un archivo llamado filtro.pipe.ts en nuestro proyecto, y tendremos que trabajar con él.
Hacemos el filtro
Como base para el filtro hemos utilizado este que podemos encontrar en GitHub que ya permite buscar en diferentes campos de la lista en la que queramos filtrar y es de uso muy sencillo.
La modificación para que se pueda buscar por palabras desordenadas consiste en añadir un split y una variable check que comprueba si todas las palabras de la búsqueda están incluidas:
Si queréis que filtre también por búsqueda parcial solo tendréis que cambiar la evaluación.
Utilización en la vista
Para aplicar el filtro en la vista es muy sencillo, sólo hay que añadir el pipe al ngFor y asociar los campos que queramos que filtre a la variable que contendrá la cadena de búsqueda:
Con esto ya tendréis un filtro de búsqueda por palabras desordenadas para vuestro proyecto de Angular, y ya sabéis, si tenéis alguna mejora del código podéis aportarla.
