Cuando una aplicación crece, necesitas organizar los productos según sus categorías y mostrarlos de forma dinámica. Para lograrlo en Angular, el routing con parámetros y la reutilización de componentes son piezas fundamentales que permiten construir páginas flexibles sin duplicar código.
¿Cómo recibir parámetros desde la URL con Angular routing?
El primer paso es definir una ruta que acepte un identificador dinámico. En el archivo de routing, se agrega la notación :id después de la ruta de categoría [01:17]. Esto le indica a Angular que ese segmento de la URL es un parámetro variable.
Para leer ese parámetro dentro del componente, se utiliza el servicio ActivatedRoute del paquete @angular/router [01:34]. Se inyecta como dependencia privada y se accede a los parámetros mediante params.map, que permite suscribirse a los cambios de ruta.
- Se crea una variable
categoryId de tipo string | null con valor inicial null.
- Dentro de la suscripción se usa
params.get('id') para obtener el valor [02:10].
- El nombre del parámetro en
get() debe coincidir exactamente con el definido en la ruta.
Si en la ruta escribes :myId, entonces debes usar params.get('myId'). Cualquier diferencia hará que el parámetro no se encuentre [02:23].
Al probar con distintos valores en la URL, por ejemplo /category/12, el console.log confirma que el parámetro se recupera correctamente [02:54].
¿Cómo crear un endpoint de productos filtrados por categoría?
La API ofrece documentación accesible en /docs [03:12]. El endpoint para obtener productos por categoría sigue la estructura /api/categories/:categoryId/products, lo que significa que retorna todos los productos asociados a ese identificador.
¿Qué refactor se aplica en el servicio de productos?
En el servicio de productos, el método getAll apuntaba directamente a /products [03:36]. Al necesitar una URL diferente para categorías, se realiza un ajuste:
- Se elimina la ruta fija
/products del cuerpo de la petición HTTP.
- Se concatena
/products solo donde corresponde, como en los métodos de creación y actualización [04:05].
- Se crea un nuevo método
getByCategory que recibe categoryId como string, junto con limit y offset para paginación [03:50].
Este método construye la URL como categories/${categoryId}/products y envía los parámetros de paginación [04:35].
¿Cómo se conecta el servicio con el componente de categoría?
Dentro del category component se inyecta el ProductService y se invoca getByCategory [05:03]. Hay un detalle importante: el categoryId puede ser null, pero el método exige un string. Por eso se envuelve la llamada dentro de un if que valida que el valor no sea nulo antes de ejecutar la petición [05:35].
- Se define un arreglo de productos tipado con el modelo
Product.
- Se suscribe al observable y se asigna la respuesta al arreglo [05:55].
- Se pasan
limit y offset con valores iniciales para controlar la paginación.
¿Por qué es clave la reutilización de componentes con inputs y outputs?
El componente AppProducts fue refactorizado previamente para recibir productos mediante un input y emitir un evento de "cargar más" con un output [00:18]. Esto permite que tanto el home como la página de categorías lo reutilicen sin duplicar lógica de renderizado.
- El botón "Cargar más productos" solo emite un evento hacia el componente padre.
- La lógica de petición y concatenación de páginas vive en cada página contenedora.
- El componente de productos se encarga exclusivamente del render [06:30].
Al agregar <app-products> en el template del category component y pasarle el arreglo de productos, la página empieza a mostrar resultados dinámicos. Cambiando entre /category/1, /category/2 o /category/3, se renderizan productos distintos según la categoría seleccionada [06:50].
En el network del navegador se puede verificar que la petición va hacia api/categories/{id}/products con los parámetros de paginación correctos [07:05].
La paginación completa dentro de la página de categorías queda como reto personal, ya que la lógica necesaria ya existe en el home component y puede replicarse fácilmente. ¿Qué otras funcionalidades agregarías para mejorar la experiencia de filtrado por categorías?
