Pagination en Angular

Nous présenterons la pagination dans Angular et quelle bibliothèque est la meilleure pour implémenter la pagination, et comment l’utiliser.

Pagination en Angular

Lorsque nous avons un ensemble de données de plus de 1 000 ou 10 000 éléments, nous ne pouvons pas afficher tous les éléments sur une seule page ou en même temps car le chargement d’un ensemble de données complet prend beaucoup de temps et de mémoire. La meilleure façon d’afficher de nombreux ensembles de données consiste à utiliser la pagination dans Angular.

De nombreuses bibliothèques peuvent être utilisées pour la pagination dans Angular. Mais dans ce tutoriel, nous utiliserons ngx-pagination, qui est facile et simple à mettre en œuvre.

Installation de ngx-pagination

Pour installer une bibliothèque ngx-pagination, nous devons ouvrir le terminal dans notre projet et exécuter la commande suivante.

# angular CLI
npm install ngx-pagination

Une fois notre bibliothèque installée, nous importerons NgxPaginationModule à partir de ngx-pagination dans le fichier app.module.ts. Nous allons également importer NgxPaginationModule dans @NgModule.

Ainsi, notre code dans app.module.ts ressemblera à ci-dessous.

# 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 { }

Nous allons créer un tableau avec quelques données et une variable number qui stockera le numéro de la page sur laquelle nous nous trouvons. Notre code dans app.component.ts ressemblera à ci-dessous.

# 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'];
}

Nous allons créer une vue pour afficher notre jeu de données. Le app.component.html ressemblera à ci-dessous.

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

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

Écrivons du code CSS pour le rendre plus beau dans app.component.css.

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

Production :

Cela fonctionnera comme ça.