Angular Search & Pagination

Pagination Component

Voor onze pagination component, wat we moeten doen zijn twee belangrijke dingen: render alle mogelijke pagina nummers voor de gebruiker om te kiezen en te detecteren wanneer de pagina is veranderd om gegevens van de gekozen pagina op te halen.

Eerstens gaan we aan onze component een Input property toevoegen om de informatie te ontvangen die we nodig hebben om de paginering te maken: de paginagrootte en het totale aantal items.

Je zult zien dat ik in plaats van een directe input property een setter heb gebruikt om de ontvangen input property te onderscheppen. Dat is om twee redenen: om de pagesAmount af te ronden (voor het geval dat dat om wat voor reden dan ook nog niet was gebeurd) en ook om een Array van getallen te vullen met de pagesAmount.

Ok, dus waarom hebben we een Array van getallen nodig? Om alle mogelijke pagina’s voor de gebruiker te renderen. In Angular kunnen we niet direct een getal nemen en een *ngFor-lus een bepaald aantal keren vragen, dus dat is een strategie die ik meestal gebruik om dit te ondervangen.

Wat we doen is: met behulp van een array van getallen, kunnen we er doorheen lussen en de index gebruiken om het getal op te halen dat we willen. Aangezien wat we willen gewoon een gewone geordende cijferlijst is, is het eenvoudig te bereiken, zoals in de onderstaande markup.

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

In deze markup renderen we alle mogelijke pagina’s voor de gebruiker om te kiezen. We hebben een ngClass toegevoegd om een stijl in te stellen op de huidig geselecteerde pagina om de gebruiker te laten weten op welke pagina hij zich momenteel bevindt. Ook hebben we een klik actie toegevoegd die een event laat weten aan de parent component dat de geselecteerde pagina is veranderd.

Nu, laten we ook twee pijlen toevoegen om onze gebruikers het leven makkelijker te maken; een om een pagina terug te gaan en een om een pagina vooruit te gaan. We gaan echter de linkerpijl verbergen als we op de eerste pagina zijn en de rechterpijl verbergen als we op de laatste pagina zijn.

Maar we hebben nog steeds een probleem hier! Wat als onze itemsAmount zijn honderden en onze paginaSize is klein? Of zelfs duizend items? Dan zouden we alle pagina’s tegelijk moeten renderen en dat zou een slechte bruikbaarheid hebben met al die getallen die daar maar blijven hangen.

Er zijn een aantal mogelijke ontwerp-oplossingen voor dit probleem, zoals het verbergen van de middelste pagina’s of het verbergen van de laatste pagina’s na een bepaald aantal. Degene die ik ga laten zien is eenvoudig te bereiken en ik denk dat interessant kan zijn in sommige gevallen; dat is het veranderen van de nummers van gewoon worden afgedrukt naar het gebruik van een select html element met elke pagina als een optie.

Dus, terug naar onze markup, we gaan de volgende wijzigingen toe te voegen aan het deel waar we onze paginanummers renderen:

Final Code

Dus, het samenvoegen van al onze stukken, zou dit de uiteindelijke code voor een eenvoudige, maar efficiënte paginering component geïmplementeerd. Het ontvangt een input met de paginagrootte en het totale aantal items en stelt de gebruiker in staat te selecteren welke pagina hij wil bekijken, waarbij een event wordt getriggerd dat de geselecteerde pagina aangeeft om de vereiste pagineringlogica/verzoeken af te handelen.