Implémentation
L’idée est de fournir un moyen facile de réutiliser la logique de pagination qui, dans l’application Angular, signifie encapsuler la logique dans une directive ou créer un composant qui accepte les Template Refs avec des widgets UI personnalisés. Si vous n’êtes pas familier avec les Template Refs, je vous encourage vivement à jeter un coup d’œil à l’un de mes précédents billets ▶️ ici.J’ai décidé de créer une directive, car le nombre d’éléments d’interface utilisateur qui peuvent être personnalisés n’est pas petit (jusqu’à 5 éléments) et vous pouvez vouloir un comportement différent lorsque le paginateur est dans un certain état. Par exemple, lorsque la première 1️⃣ ou la dernière 🏁 page est sélectionnée, vous pouvez souhaiter faire quelque chose avec les boutons ‘go to first’, ‘go to previous page’ ou ‘go to last’, ‘go to next page’ 🔘. Vous pouvez soit désactiver les éléments, soit les masquer, soit appliquer une classe CSS donnée. Pensez simplement au nombre de propriétés d’entrée responsables de la configuration si le paginateur était implémenté en tant que composant 🔥 😱.
Passons en revue certaines parties du code de la directive avant de présenter l’implémentation complète 😏
La directive injecte deux services afin d’interagir avec l’élément DOM sous-jacent. En outre, elle est exportée, de sorte que vous pouvez accéder à une instance dans un modèle.
Elle possède la méthode setValue qui est responsable de la définition de la valeur de l’élément d’entrée sous-jacent et la méthode setPage qui effectue des actions lorsque la page sélectionnée a changé.
La directive expose des méthodes publiques pour une navigation impérative directe vers une page souhaitée ✈️.
En outre, elle possède deux getters publics qui indiquent certains états du paginateur.
Lorsque l’événement input se déclenche, la directive se charge de supprimer les caractères invalides 🚫.
Lorsque l’événement change se déclenche, la valeur actuelle de l’élément input est vérifiée et modifiée si nécessaire (valeur vide ou hors plage). Ensuite, l’événement pageChange de la directive est déclenché.
Enfin, les changements de propriétés d’entrée sont traités en tenant compte des valeurs invalides.
L’ensemble du code des directives est le suivant :
.