A medida que tenemos más información en la página, surge la necesidad de ir sacando por pantalla la información de forma paginada, es decir, limitada a una cantidad de registros y que el usuario pueda ir pasando páginas para ir viendo el resto de registros.
Para integrar esa funcionalidad en nuestro proyecto, seguiremos estos pasos:
- Instalamos el módulo de Paginación, con este comando: «npm install ngx-pagination –save»
- En nuestro fichero «app.module.ts» lo importamos añadiendo: «import { NgxPaginationModule } from ‘ngx-pagination’;»
- En la sección imports, en ese mismo fichero, añadimos: «NgxPaginationModule»
- imports: [
- BrowserModule, NgxPaginationModule
- ],
- En el módulo donde vayamos a usar paginación, tenemos que añadir 2 propiedades:
- pag_actual: number = 1; (indicamos la página inicial)
- contador: number = 5; (indicamos la cantidad de elementos por página)
- Cuando listemos elementos, por ejemplo películas, nuestro bucle «for» quedaría como sigue:
- «let peli of peliculas | paginate { itemsPerPage: contador, currentPage: pag_actual}»
- Y ya por último, en ese componente donde estamos sacando la lista de registros, añadimos los controles de página en el pie de la página:
- <div>
- <pagination-controls (pageChange)=»pag_actual=$event»></pagination-controls>
- </div>
Con todo ello, los registros serán paginados para mostrar en cada página la cantidad que le hayamos indicado.