Pagination with Angular 10 + Spring Boot example

In this tutorial, I will show you how to build a full-stack Pagination (Angular 10 + Spring Boot) example on Server side. The back-end server uses Spring Data and Spring Web for REST APIs, front-end side is an Angular 10 App with HTTPClient.

Related Posts:
– Angular 10 + Spring Boot + MySQL example: CRUD App
– Angular 10 + Spring Boot + PostgreSQL example: CRUD App
– Angular 10 + Spring Boot + MongoDB example: CRUD App
– Angular 10 + Spring Boot: JWT Authentication example | Spring Security

Pagination with Angular 10 & Spring Boot example

Assume that we have tutorials table in database like this:

We need to export APIs for pagination (with/without filter) as following samples:

• /api/tutorials?page=1&size=3
• /api/tutorials?size=5: using default value for page
• /api/tutorials?title=data&page=1&size=5: pagination & filter by title containing ‘data’
• /api/tutorials/published?page=2: pagination & filter by ‘published’ status

This is structure of the result that we want to get from the APIs:

{
    "totalItems": 12,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}

Our Angular app will display the result with pagination:

You can change to a page with larger index:

Or change page size (quantity of items per page):

Or paging with filter:

Full-stack Architecture

We’re gonna build the application with following architecture:

– Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using Spring Data.
– Angular 10 Client sends HTTP Requests and retrieve HTTP Responses using HttpClient Module, shows data on the components. We also use Angular Router for navigating to pages.

Spring Boot Server side Pagination

Overview

The Spring Boot Server will be built with Spring Web and Spring Data.

It can export API with endpoint that supports both pagination and filter:
api/tutorials?title=[keyword]&page=[index]&size=[number]

The response structure looks like this:

{
  "totalItems": 12,
  "tutorials": [
    {
      "id": 6,
      "title": "Microservices Tut#6",
      "description": "Tut#6 Description",
      "published": false
    },
    {
      "id": 7,
      "title": "MongoDB Database Tut#7",
      "description": "Tut#7 Description",
      "published": true
    },
    {
      "id": 8,
      "title": "MySQL Database Tut#8",
      "description": "Tut#8 Description",
      "published": true
    }
  ],
  "totalPages": 3,
  "currentPage": 1
}

Project Structure

This is the structure of the project that we’re gonna build:

Let me explain it briefly.

– Tutorial data model class corresponds to entity/document and table/collection tutorials.
– TutorialRepository is an interface for CRUD methods and custom finder methods. It will be autowired in TutorialController.
– TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished…
– Configuration for Spring Datasource, DB Connection in application.properties.
– pom.xml contains dependencies for Spring Boot and MySQL/PostgreSQL/MongoDB.

Implementation

Step by step to make the Server side Pagination back-end for this Angular front-end can be found at one of following posts:
– For MySQL/PostgreSQL: Spring Boot Pagination & Filter example | Spring JPA, Pageable
– For MongoDB: Spring Boot MongoDB Pagination example with Spring Data

Angular 10 Pagination Client

Overview

– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.

– TutorialsList component gets and displays Tutorials with pagination and filter.
– Tutorial component has form for editing Tutorial’s details based on :id.
– AddTutorial component has form for submission new Tutorial.

– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.

Project Structure

Now here is the directory of our Angular 10 Client:

– There are 3 components: tutorials-list, tutorial-details, add-tutorial.
– tutorial.service has methods for sending HTTP requests to the Apis.
– app-routing.module.ts defines routes for each component.
– app component contains router view and navigation bar.
– app.module.ts declares Angular components and import necessary modules.

Implementation

Step by step to build front-end application for the Server side pagination back-end above can be found at:
Angular 10 Pagination example using ngx-pagination

Other versions:
– Angular 8 Pagination example using ngx-pagination
– Angular 11 Pagination example with ngx-pagination
– Angular 12 Pagination example | ngx-pagination

Conclusion

Now we have an overview of Server side Pagination example for Angular 10 + Spring Boot when building a full-stack App.

We also take a look at client-server architecture for REST API using Spring Boot with Spring Data, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system:
– Back-end:

• For MySQL/PostgreSQL
• For MongoDB

– Front-end

You may want to know how to run both projects in one place:
How to Integrate Angular 10 with Spring Boot Rest API

Fullstack CRUD App:
– Angular 10 + Spring Boot + MySQL example: CRUD App
– Angular 10 + Spring Boot + PostgreSQL example: CRUD App
– Angular 10 + Spring Boot + MongoDB example: CRUD App

Or Security: Angular 10 + Spring Boot: JWT Authentication example | Spring Security

Happy learning, see you again!