Todo programador sabe lo engorroso que puede ser tener que gestionar una gran cantidad de datos e información en el diseño de nuestra web.

Cuando esto sucede, solemos tener que realizar scrolls interminables para poder visualizar todo el contenido, haciendo así la navegación bastante incómoda.

Aquí tenemos el modelo de página que vamos a modificar. Podemos ver que en ella todos los elementos se disponen hacia abajo sin importar cuántos elementos queramos colocar sin necesidad de estar desplazándonos hacia abajo de forma ilimitada:

Es por ello que la paginación resulta ser nuestra gran aliada en casos como éstos y aquí vamos a aprender a implementarla:

Pasos a seguir:

Disponemos una librería que nos ofrece un sistema de paginación. Ésta es ngx-pagination.

Lo primero que debemos hacer es ejecutar una ventana de comandos apuntando a la carpeta donde guardamos nuestro proyecto. Ejecutando un simple cd /ruta en el CMD podemos acceder a ella:

Una vez aquí, el siguiente paso es ejecutar el comando npm install ngx-pagination --save para instalar los elementos necesarios en el proyecto:

A continuación, debemos abrir nuestro proyecto y acceder al archivo app.module.ts para importar los elementos necesarios. Debemos importar en las líneas iniciales el componente <NgxPaginationModule>. Escribiremos la siguiente línea:

import { NgxPaginationModule } from "ngx-pagination";

A su vez también debemos añadir el componente NgxPaginationModule en los imports de @NgModule:

Una vez hecho esto, nos ubicamos en el archivo HTML (archivo.component.html) de nuestro componente principal. En él, acompañando al *ngFor que carga todos los elementos de la página, debemos escribir el siguiente script:

| paginate: { itemsPerPage: 5, currentPage: page }

Siendo el número que acompaña al atributo «itemsPerPage» el número de elementos que deseamos visualizar por página. Lo implementamos:

 *ngFor="let vid of videojuegos | paginate: {itemsPerPage: 3, currentPage: page}"

Paginate también dispone de atributos como «id» (si deseamos identificarlo o modificarlo por su etiqueta) y «totalItems» (asigna el número total de elementos).

Toda paginación tiene su «panel de control». Éste debe implementarse donde deseemos en la página y será una etiqueta <pagination-controls></pagination-controls> con sus respectivos atributos:

<pagination-controls  id="some_id"
                      (pageChange)="pageChanged($event)"
                      (pageBoundsCorrection)="pageChanged($event)"
                      maxSize="9"
                      directionLinks="true"
                      autoHide="true"
                      responsive="true"
                      previousLabel="Previous"
                      nextLabel="Next"
                      screenReaderPaginationLabel="Pagination"
                      screenReaderPageLabel="page"
                      screenReaderCurrentLabel="You're on page">
</pagination-controls>

En este caso lo implementaremos al final de la página con los siguientes atributos:

<pagination-controls (pageChange)="page = $event" previousLabel="Anterior" nextLabel="Siguiente"></pagination-controls>

Este evento enviará el número de página y debemos recogerlo en el archivo .ts del componente. Para ello declaramos una variable «page» en nuestro archivo.component.ts

Una vez capturado el nº de página ya habríamos finalizado. El resultado final sería una pantalla que muestre 3 elementos por página como hemos indicado:

Como vemos, es una forma fácil y rápida de acomodar los elementos de nuestra web a nuestro gusto. Espero haya sido de ayuda.

¡Un saludo!

Autor: Diego García Gordo

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2021-2022

Código / recursos utilizados / Otros datos de interés:

• Enlace GitHub con proyecto utilizado: https://github.com/MsDiegoG/ejemplopaginacion
• Documentación del componente: https://www.npmjs.com/package/ngx-pagination