Introduction
The most likely cause of this search result is a very long list of an array that needs to be displayed on the screen. Unless the backend architecture already implements server-side pagination of some sort, the displaying and formatting of data rest in the hand of the frontend engineer.
I recently got into a company and my first task was regarding a customer who complained of our retail service not displaying all of her customers. According to her, it takes a very long time to load. The first course of action was to examine the API that returned her customer object. A quick look at the console debunked the idea that it was a backend problem- since the array was returned in a reasonable time but... the array contained a list of 7000 customers!
This is a simple case for pagination. Writing a list of 7000 customers in a single is both bad UX and takes a lot of time to render to the browser. Pagination is simply the process of separating returned data or digital content into discrete pages. This is done both to enhance readability and reduce load time. NGX-pagination is an NPM package for pagination in angular. We would go step by step to show exactly how to use it.
How to use NGX-pagination in an angular app
- Import the module and include it in your app
- Go to the target component and include the pagination pipe
- Include the pagination controls UI
To get started, we first of all need to install the package using NPM.
Next, we import it into the module where the target component is hosted and add it to the imports array. For this example, we would be using the main app module.
I have gone ahead to use a free rest API service to fetch a list for us to work with. After adding some CSS for styling, we currently have this as the result on display.
Taking a look at the console, we see that an array of 200 objects is being displayed. This same object has been rendered and displayed on the left side of the screen.
This is the HTML that renders the view.
Here, the *ngFor directive is being used to dynamically display all of the incoming objects. We need to include the pagination pipe just right after the *ngFor directive to paginate this array. NOTE that the PaginatePipe should be placed at the end of a *ngFor expression.
In the components HTML, we add in the pagination pipe and include a div to hold the pagination controls.
The paginate pipe at the very list must include:
- itemsPerPage [number] - required The number of items to display on each page.
- currentPage [number] - required The current (active) page number.
In the ts file of the component, create a variable to hold the current page number. In this example, the variable used is "page".
After compilation, the page now appears as so:
We have successfully paginated the array of 200 objects into a very readable view of 12 objects per page.
This is a getting started guide to NGX-pagination. For a full list of all of its available customizations, visit the official page here.
View the source code for this tutorial here.
