In this tutorial, I will show you how to build a full-stack Pagination (Angular 11 + 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 11 App with HTTPClient.

Full Article: https://bezkoder.com/pagination-spring-boot-angular-11/

Pagination with Angular 11 & 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 11 Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Angular Router for navigating to pages.

For more details, please visit: https://bezkoder.com/pagination-spring-boot-angular-11/

Further Reading

• How to Integrate Angular with Spring Boot Rest API

Fullstack CRUD App:

• Angular + Spring Boot + MySQL example
• Angular + Spring Boot + PostgreSQL example
• Angular + Spring Boot + MongoDB example

Or Security: Angular 11 + Spring Boot: JWT Authentication example

Happy learning, see you again!

#spring #angular #pagination #web-development #spring-boot #spring-framework