Paginación en Angular: Dos componentes y un servicio

“¿Saben aquel que diu que van dos componentes y un servicio en Angular y…?”

Así comenzaría Eugenio, uno de los genios del humor de todos los tiempos, este artículo, pero me temo que el objeto del mismo no es contar un chiste sino explicar cómo hacer un sistema de paginación sobre una lista de resultados de una forma sencilla y concisa utilizando Angular.

Imaginaos que tenemos que paginar un listado de tiendas para que el scroll de nuestro portal web no se convierta en infinito…

Nuestro template HTML sería algo como esto:

 

 

Obviando los estilos CSS, que no vienen al caso, en este template no tenemos nada del otro mundo excepto un ngFor para recorrer el listado de tiendas que recibimos en la variable shops.

El componente que vamos a estudiar es el que hemos bautizado como app-pagination y hay que destacar de su firma que necesita como entrada un número de página (atributo page), el total de las páginas a dibujar(atributo totalPages) y el número de tiendas total que tiene nuestra colección (atributo numShops).

Nuestro componente app-pagination tiene a su vez un evento de salida que se llama paginaEmitter y que se ejecutará cada vez que el usuario quiera pasar de página.

Bien, pasemos ahora a la declaración de componente dueño de este template…

En esta ocasión le hemos bautizado, en un derroche de originalidad, como shop-list-component y tendría una estructura tal que ésta:

 

 

No hacen falta muchas explicaciones extra:

El servicio inyectado con el nombre ShopService es el encargado de traer los datos de la página que especifiquemos y  la parte backend del aplicativo (ya sea Node.js, Java, etc.) será la  que nos devuelva un listado de objetos JSON para poder plasmarlos en el template que hemos visto antes.

Cada vez que el usuario quiera pasar de página, se gestionará dicho evento desde la función gotToPage y el servicio renovará el listado de tiendas recibidas vía REST.

Por fin llegamos al tercer protagonista de nuestra historia: el app-pagination.

Además de tener un nombre feísimo, el tipo es más simple que el mecanismo de un botijo.

Mirad si no su template:

Este fragmento sólo dibujará algo en pantalla si existe alguna tienda (fijaos en el ngIf) y además tiene unos controles muy sencillos queevitan que aparezca el enlace a Anterior si estamos en la primera página (*ngIf=”page > 1“) o el de Siguiente si hemos llegado a la última (*ngIf=”page <totalPages“).

Los eventos click del ratón se controlan con los métodos anterior() y siguiente() que ahora mismo veremos en la definición del propio componente:

 

 

¡Bien! anterior y siguiente son las funciones que incrementan o decrementan el número de página en la que estamos para después llamar al método verdaderamente interesante de nuestro componente: pasarPagina.

Este método se apoya en el objeto paginaEmitter para emitir un evento que el padre de app-pagination (en este caso ShopListComponent) pueda escuchar y así ejecute a continuación el cambio de página.

¡Nada! hemos llegado al final casi sin esfuerzo… No sabemos si a Eugenio le hubiera hecho gracia esta explicación, pero aquí se despide el duelo.

¡Hasta la próxima!

 

Por: Javier Lindo

Javier_Lindo_JustCodeIt

Ingeniero Técnico de Informática y Sistemas  (UCM)
Experto desarrollador backend en Java, enfocado al mundo JS y sus frameworks, hablando de todo ello en su blog personal mrviriato.es

 

 

Exalumno del KeepCoding Bootcamp de Desarrollo Web

Si tienes algo que deseas compartir o quieres formar parte de JustCodeIt, escríbenos a [email protected].



Share this:

Leave a comment