Recherche angulaire et pagination

Composant de pagination

Pour notre composant de pagination, ce que nous devons faire sont deux choses principales : rendre tous les numéros de page possibles pour que l’utilisateur puisse choisir et détecter quand la page a changé afin de récupérer les données de la page choisie.

Tout d’abord, nous allons ajouter à notre composant une propriété Input pour recevoir les informations dont nous avons besoin pour créer la pagination : la taille des pages et la quantité totale d’éléments.

Vous remarquerez qu’au lieu d’une propriété input directe, j’ai utilisé un setter pour intercepter la propriété input reçue. C’était pour deux raisons : pour arrondir le pagesAmount (au cas où, pour une raison quelconque, il ne l’était pas déjà) et aussi pour remplir un Array de chiffres avec le pagesAmount.

Ok, alors pourquoi avons-nous besoin d’un Array de chiffres ? Afin de rendre toutes les pages possibles pour l’utilisateur. Dans Angular, nous ne pouvons pas directement prendre un nombre et demander une boucle *ngFor un nombre spécifique de fois, donc c’est une stratégie que j’utilise habituellement pour surmonter cela.

Ce que nous faisons est : en utilisant un tableau de nombres, nous pouvons boucler à travers lui et utiliser l’index pour récupérer le nombre que nous voulons. Puisque ce que nous voulons est juste une liste de nombres ordonnée régulière, c’est simple à réaliser, comme le montre le balisage ci-dessous.

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

Dans ce balisage, nous rendons toutes les pages possibles pour que l’utilisateur puisse choisir. Nous avons ajouté un ngClass pour définir un certain style sur la page actuellement sélectionnée afin de faire savoir à l’utilisateur dans quelle page il se trouve actuellement. De plus, nous avons inséré une action de clic qui va émettre un événement faisant savoir au composant parent que la page sélectionnée a changé.

Maintenant, ajoutons également deux flèches pour faciliter la vie de nos utilisateurs ; une pour revenir en arrière d’une page et une pour avancer d’une page. Cependant, nous allons cacher la flèche de gauche lorsque nous sommes actuellement à la première page et cacher la flèche de droite lorsque nous sommes actuellement à la dernière page.

Mais nous avons encore un problème ici ! Que faire si nos itemsAmount sont des centaines et que notre pageSize est petite ? Ou même des milliers d’articles ? Nous rendrions toutes les pages en même temps et nous aurions une assez mauvaise convivialité avec tous ces chiffres qui pendent juste là.

Il y a quelques solutions de conception possibles pour ce problème, comme cacher les pages du milieu ou cacher les dernières pages après un certain nombre. Celle que je vais montrer est simple à réaliser et je crois qu’elle peut être intéressante dans certains cas ; qui est de changer les numéros de juste être imprimés pour utiliser un élément html de sélection avec chaque page comme une option.

Donc, de retour à notre balisage, nous allons ajouter les changements suivants à la partie où nous rendons nos numéros de page :

Code final

Donc, en mettant toutes nos pièces ensemble, ce serait le code final pour un composant de pagination simple mais efficace mis en œuvre. Il reçoit une entrée avec la taille des pages et la quantité totale d’articles et permet à l’utilisateur de sélectionner la page qu’il veut voir, en déclenchant un événement indiquant la page sélectionnée afin de gérer la logique/demande de pagination requise.