Filtro de búsqueda por palabras desordenadas en Angular

Portada » Blog » Filtro de búsqueda por palabras desordenadas en Angular

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:

Copiar a portapapeles

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:

Copiar a portapapeles

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:

Copiar a portapapeles

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.

Por |2018-12-04T16:34:23+00:00diciembre 11th, 2018|Aprende con nosotros, Desarrollo y diseño web, Tutoriales|

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies