Filtros de Productos con Query Params en Angular

¿Cómo filtrar productos por categoría sin redirigir la página?

Imagina poder filtrar productos por categorías en tu aplicación sin tener que forzar una recarga de página o redirigir a una nueva sección. Este tipo de funcionalidad se puede lograr mediante el uso de query params, una herramienta valiosa que permite la interacción dinámica con datos y elementos de tu aplicación sin romper el flujo del usuario.

¿Qué son los query params y cómo funcionan?

Los query params son parámetros opcionales que puedes añadir a la URL de tu aplicación. A diferencia de los URL params, que son obligatorios, los query params no causan errores de dirección o fetch si no se encuentran disponibles. Se implementan utilizando el símbolo de interrogación (?) seguido del parámetro y su valor. Un uso común podría ser ?categoryId=3, que indicaría la categoría específica que se desea filtrar.

Para aplicar query params en desarrollo con Angular, primero necesitas capturar estos parámetros de URL en tu componente y luego realizar una consulta a la API para traer los datos específicos que necesitas.

¿Cómo implementar query params en un proyecto Angular?

El proceso de implementación de query params para filtrar productos por categorías puede desglosarse en varias etapas esenciales:

1. Adjuntar el parámetro a la URL:
   • Dentro de tu componente Angular, puedes usar un routerLink para modificar dinámicamente la URL de tu aplicación cuando un usuario hace clic en una categoría.
   • Importa RouterLink de @angular/router y aplícalo en tu href.

<a [routerLink]="['/home']" [queryParams]="{ categoryId: category.id }">{{ category.name }}</a>

2. Leer y aplicar el parámetro en el componente:
   • Usa un @Input() para capturar el parámetro categoryId.
   • Implementa el método ngOnChanges para actuar sobre los cambios del parámetro.

@Input()
categoryId: string;

ngOnChanges(changes: SimpleChanges) {
  if (changes['categoryId']) {
    this.getProducts(this.categoryId);
  }
}

3. Realizar el fetch en la API con el parámetro filtrado:
   • A partir de la categoría seleccionada, realiza un fetch solo de los productos pertenecientes a dicha categoría.
   • Si no se proporciona un categoryId, trae todos los productos.

getProducts(categoryId?: string) {
  const url = new URL('https://api.fakestoreapi.com/products');
  if (categoryId) {
    url.searchParams.append('categoryId', categoryId);
  }
  fetch(url.toString())
    .then(response => response.json())
    .then(data => console.log(data));
}

¿Cómo optimizar el código para evitar múltiples llamados?

El método ngOnChanges se ejecuta tanto al iniciar el componente como cada vez que cambia un @Input(). Utiliza solamente este método para llamar a getProducts, evitando múltiples llamadas innecesarias que puedan ralentizar tu aplicación.

• Elimina la llamada a getProducts desde el ngOnInit y confía solo en ngOnChanges para manejar los cambios de parámetros.

ngOnChanges(changes: SimpleChanges) {
  if (changes['categoryId']) {
    this.getProducts(this.categoryId);
  }
}

¿Por qué es ventajoso usar query params?

La utilización de query params en aplicaciones web modernas aporta múltiples beneficios, tales como:

• Optimización del rendimiento: Evita recargar la página completa al cambiar de categorías.
• Mejor experiencia de usuario: El cambio dinámico mejora la fluidez de navegación.
• Facilita integraciones: Aumenta la flexibilidad al integrarse con diversas API de backend que aceptan filtros.

En conclusión, los query params y su correcta implementación en una aplicación Angular pueden transformar significativamente cómo los usuarios interactúan con los datos, ofreciendo una experiencia eficiente y dinámica. ¡No dudes en implementar estas técnicas en tus proyectos y sigue explorando nuevas formas de enriquecer tus desarrollos!