Implementação
A ideia é fornecer uma maneira fácil de reutilizar a lógica de paginação que em aplicação angular significa encapsular a lógica em uma diretiva ou criar um componente que aceita Refs de modelo com widgets personalizados de IU. Se você não está familiarizado com Refs de Template, eu encorajo você a dar uma olhada em um de meus posts anteriores ▶️ aqui.Eu decidi criar uma diretiva, já que o número de elementos de IU que podem ser personalizados não é pequeno (até 5 itens) e você pode querer um comportamento diferente quando o paginador estiver em certo estado. Por exemplo, quando a primeira página 1️⃣ ou a última 🏁 é selecionada, você pode desejar fazer algo com os botões ‘go to first’, ‘go to previous page’ ou ‘go to last’, ‘go to next page’ 🔘. Você pode desativar os elementos, escondê-los ou aplicar uma determinada classe CSS. Basta pensar no número de propriedades de entrada responsáveis pela configuração se o paginador foi implementado como componente 🔥 😱.
Vamos dar uma olhada em partes do código da diretiva antes de apresentar toda a implementação 😏
A diretiva injeta dois serviços a fim de interagir com o elemento DOM subjacente. Além disso, ela é exportada, para que você possa acessar uma instância em um template.
Ela tem o método setValue que é responsável por definir o valor do elemento de entrada subjacente e o método setPage que executa ações quando a página selecionada mudou.
A diretiva expõe métodos públicos para navegação direta imperativa a uma página desejada ✈️.
Além disso, tem dois getters públicos que indicam certos estados do paginador.
Quando o evento de entrada dispara, a diretiva se encarrega de remover caracteres inválidos 🚫.
Quando o evento de mudança dispara, o valor atual do elemento de entrada é verificado e alterado, se necessário (valor vazio ou fora do intervalo). A seguir a página da diretrizO evento Change é disparado.
Último mas não menos importante, as alterações das propriedades de entrada são tratadas levando em conta valores inválidos.
O código inteiro da diretriz é o seguinte: