Angular Search & Pagination

Componente di paginazione

Per il nostro componente di paginazione, quello che dobbiamo fare sono due cose principali: rendere tutti i possibili numeri di pagina che l’utente può scegliere e rilevare quando la pagina è cambiata per recuperare i dati dalla pagina scelta.

Prima di tutto, aggiungeremo al nostro componente una proprietà Input per ricevere le informazioni di cui abbiamo bisogno per creare la paginazione: la dimensione delle pagine e la quantità totale di elementi.

Si noterà che invece di una proprietà input diretta ho usato un setter per intercettare la proprietà input ricevuta. Questo per due cose: per arrotondare il pagesAmount (nel caso che per qualche motivo non lo fosse già) e anche per riempire un Array di numeri con il pagesAmount.

Ok, allora perché abbiamo bisogno di un Array di numeri? Per rendere tutte le possibili pagine per l’utente. In Angular non possiamo prendere direttamente un numero e chiedere un *ngFor loop una quantità specifica di volte, quindi questa è una strategia che di solito uso per superare questo.

Quello che facciamo è: usando un array di numeri, possiamo fare un loop attraverso di esso e usare l’indice per recuperare il numero che vogliamo. Poiché ciò che vogliamo è solo una normale lista di numeri ordinati, è semplice da realizzare, come mostrato nel markup qui sotto.

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

In questo markup stiamo rendendo tutte le possibili pagine che l’utente può scegliere. Abbiamo aggiunto una ngClass per impostare un certo stile sulla pagina attualmente selezionata per far sapere all’utente in quale pagina si trova attualmente. Inoltre, abbiamo inserito un’azione click che emetterà un evento per far sapere al componente padre che la pagina selezionata è cambiata.

Ora, aggiungiamo anche due frecce per facilitare la vita ai nostri utenti; una per tornare indietro di una pagina e una per andare avanti di una pagina. Tuttavia, nasconderemo la freccia sinistra quando siamo attualmente alla prima pagina e nasconderemo la freccia destra quando siamo attualmente all’ultima pagina.

Ma abbiamo ancora un problema qui! Cosa succede se i nostri itemsAmount sono centinaia e la nostra pageSize è piccola? O anche migliaia di articoli? Faremmo il rendering di tutte le pagine in una volta sola e avremmo una pessima usabilità con tutti quei numeri appesi lì.

Ci sono alcune possibili soluzioni di design per questo problema, come nascondere le pagine centrali o nascondere le ultime pagine dopo un certo numero. Quella che mostrerò è semplice da realizzare e credo che possa essere interessante in alcuni casi; ovvero cambiare i numeri dall’essere semplicemente stampati all’uso di un elemento html di selezione con ogni pagina come opzione.

Quindi, tornando al nostro markup, aggiungeremo le seguenti modifiche alla parte dove rendiamo i nostri numeri di pagina:

Codice finale

Quindi, mettendo insieme tutti i nostri pezzi, questo sarebbe il codice finale per un semplice ma efficiente componente di paginazione. Riceve un input con le dimensioni delle pagine e la quantità totale di articoli e permette all’utente di selezionare quale pagina vuole visualizzare, innescando un evento che indica la pagina selezionata al fine di gestire la logica/richieste di paginazione richieste.