Paginación en Angular

Presentaremos la paginación en Angular y qué biblioteca es mejor para implementar la paginación y cómo usarla.

Paginación en Angular

Cuando tenemos un conjunto de datos de más de 1000 o 10000 elementos, no podemos mostrar todos los elementos en una página o a la vez porque se necesita mucho tiempo y memoria para cargar un conjunto de datos completo. La mejor manera de mostrar muchos conjuntos de datos es mediante la paginación en Angular.

Se pueden usar muchas bibliotecas para la paginación en Angular. Pero en este tutorial, usaremos ngx-pagination, que es fácil y simple de implementar.

Instalación de ngx-pagination

Para instalar una biblioteca ngx-pagination, necesitamos abrir la terminal en nuestro proyecto y ejecutar el siguiente comando.

# angular CLI
npm install ngx-pagination

Después de instalar nuestra biblioteca, importaremos NgxPaginationModule desde ngx-pagination en el archivo app.module.ts. También importaremos NgxPaginationModule en @NgModule.

Entonces, nuestro código en app.module.ts se verá a continuación.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxPaginationModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Crearemos un array con algunos datos y una variable number que almacenará el número de la página en la que nos encontramos. Nuestro código en app.component.ts se verá a continuación.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pages: number = 1;
  dataset: any[] = ['1','2','3','4','5','6','7','8','9','10'];
}

Crearemos una vista para mostrar nuestro conjunto de datos. El app.component.html se verá como a continuación.

# angular
<div>
  <h2
    *ngFor="
      let data of dataset | paginate: { itemsPerPage: 2, currentPage: pages }
    "
  >
    {{ data }}
  </h2>
</div>

<pagination-controls (pageChange)="pages = $event"></pagination-controls>

Escribamos un código CSS para que se vea mejor en app.component.css.

# angular
div{
  text-align: center;
  padding: 10px;
}
h2{
  border: 1px solid black;
  padding: 10px;
}

Producción:

Funcionará así.