Procura Angular e Paginação

Componente de Paginação

Para o nosso componente de paginação, o que temos que fazer são duas coisas principais: renderizar todos os números de página possíveis para o usuário escolher e detectar quando a página foi alterada, a fim de recuperar os dados da página escolhida.

Primeiro de tudo, vamos adicionar ao nosso componente uma propriedade Input para receber as informações necessárias para criar a paginação: o tamanho da página e a quantidade total de itens.

Vai notar que em vez de uma propriedade de input directo usei um setter para interceptar a propriedade de input recebido. Isso foi por duas razões: para arredondar as páginasAmount (caso por alguma razão ainda não o tenha feito) e também para preencher um Array de números com as páginasAmount.

Ok, então porque é que precisamos de um Array de números? Para poder renderizar todas as páginas possíveis para o usuário. Em Angular não podemos pegar diretamente um número e pedir um *ngFor loop uma quantidade específica de vezes, então essa é uma estratégia que eu normalmente uso para superar isso.

O que fazemos é: usando um array de números, podemos fazer um loop através dele e usar o índice para recuperar o número que queremos. Como o que queremos é apenas uma lista de números ordenados regularmente, é simples de conseguir, como mostrado na marcação abaixo.

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

Nesta marcação estamos renderizando todas as páginas possíveis para o usuário escolher. Adicionamos um ngClass para definir algum estilo na página atualmente selecionada, a fim de que o usuário saiba em qual página ele está atualmente. Também inserimos uma ação de clique que vai emitir um evento deixando o componente pai saber que a página selecionada mudou.

Agora, vamos também adicionar duas setas para facilitar a vida dos nossos usuários; uma para voltar uma página e outra para avançar uma página. No entanto, vamos esconder a seta para a esquerda quando estivermos na primeira página e esconder a seta para a direita quando estivermos na última página.

Mas ainda temos aqui um problema! E se os nossos itensAmount são centenas e a nossa páginaSize é pequena? Ou até milhares de itens? Estaríamos renderizando todas as páginas de uma vez e teríamos uma usabilidade muito ruim com todos aqueles números pendurados ali.

Existem algumas possíveis soluções de design para este problema, como esconder as páginas do meio ou esconder as últimas páginas após um certo número. A que vou mostrar é simples de conseguir e acredito que pode ser interessante em alguns casos; que é mudar os números de apenas ser impresso para usar um elemento html selecionado com cada página como opção.

Então, voltando à nossa marcação, vamos adicionar as seguintes mudanças na parte onde renderizamos os números das nossas páginas:

Código Final

Então, juntando todas as nossas peças, este seria o código final para um componente de paginação simples mas eficiente implementado. Ele recebe uma entrada com o tamanho das páginas e o total de itens e permite que o usuário selecione qual página deseja visualizar, acionando um evento indicando a página selecionada, a fim de lidar com a lógica/pedidos de paginação necessários.