When pagination is performed on the backend side of a web application, we need to support this feature on the frontend. Read this post to see how you can easily handle Spring Boot Page object in an Angular app.

What we are going to build

The goal is to build a custom pagination component that accepts Spring Boot paginated response and displays it in a datatable. We will be able to control the amount of records fetched from the backend per page and which page should be displayed at the moment. After changing the number of requested elements or deleting a record we will be redirected back to the first page to avoid displaying an empty datatable.

Our example app will present a list of projects fetched from the "/api/projects" endpoint exposed by the backend API.

The finished project is available in the GitHub repository – little-pinecone/scrum_ally.

You can see the datatable created in that project on the following screenshot:

Architecture overview

You can see the final directory tree for the pagination part of the frontend app on the image below:

Requirements

• Angular CLI – a command line interface tool that generates projects, components, modules, services.
  I’m working on:
  
  $ ng --version Angular CLI: 6.0.8 Node: 8.11.3 OS: linux x64

  1 2 3 4 5

  $ ng --version Angular CLI: 6.0.8 Node: 8.11.3 OS: linux x64

• To see the backend part of this example web application, check out the Add pagination to a Spring Boot app post.

Handle pagination

Consume a page received from a Spring Boot app

Mirror the Page instance that will be send by the API, you can define its model in three files:

Adjust the default page size to your needs.

Add a service to handle base actions

We need a service that will update the request parameters after a user changes amount of elements per page or page number. Create the service with the following command:

We are going to start from this scaffolding:

Now, we are going to add the function that handles requesting the next page:

Furthermore, add the function for getting the previous page:

We simply increase and decrease the pageNumber variable here.

Finally, we need to handle a request that changes the amount of elements per page:

We need to show the first page when the size is being changed, therefore we need the  page.pageable.pageNumber = Pageable.FIRST_PAGE_NUMBER;  line.

All methods in this service return the pageable object.

Create the pagination component

In the terminal, use Angular CLI to generate the following component:

This component is going to utilize the functions provided by the custom-pagination.service we’ve just created to allow maneuvering between pages and change number of displayed records. Copy the following code to your custom-pagination.component.ts file:

The component requires an @Input() page: Page<any> object and emits a suitable event for every click on the pagination controls – we will handle them in a minute – but first, let’s create an html template for the component:

Let’s explain some code in this template.

We have a dropdown with hardcoded values for available page sizes:

We also took care of disabling the previous and next controls in case the given page is first or last:

In my example project build with Daemonite Material theme (based on Bootstrap) the component looks like this:

Include the pagination component in a component that serves the datatable

I want the pagination to be displayed under the table with the projects, so I included the component in my projects-table.component:

Here, the pagination component is given the page with projects and it can emit events notifying our projects-table.component that a user requested for a different page or changed the size of the page. The ProjectsTableComponent reacts for those events with the appropriate methods.

The projects-table.component has to request for project list every time the page is loaded:

Now, we are going to add the following methods to handle user requests made in the pagination component (answer the emitted events):

We simply modify the pageable property every time a user manipulates pagination settings. Then, the getData() method retrieves a new list of projects from the projectDataService.

Use a designated service to get data

You can find the implementation of the getPage(pageable) method from the ProjectDataService below :

We use the default sorting – by id. Check out the Handle server-side sorting in an Angular application post to see how you can implement the interactive sorting fearure.

Test the pagination

I updated the example project to Angular 8 and realised that some fixes are required. You will find them in the commit 1057f352abc. Updated CustomPaginationService test. Updated ProjectDataService test.

When testing the CustomPaginationService, we check whether the page number can be increased and decreased properly, and whether the change in page size redirects a user to the first page:

When testing the ProjectDataService we create a simple JSON with paginated projects and we flush it when the getPage() method is tested:

Photo by Negative Space on StockSnap