I Dev

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: spring-boot-angular-11-pagination-example-database

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:

spring-boot-angular-11-pagination-example-default-paging

You can change to a page with larger index:

spring-boot-angular-11-pagination-example-change-page

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

spring-boot-angular-11-pagination-example-change-items-per-page

Or paging with filter:

spring-boot-angular-11-pagination-example-paging-filter

Full-stack Architecture

We're gonna build the application with following architecture: spring-boot-angular-11-pagination-example-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

Fullstack CRUD App:

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

Happy learning, see you again!

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

Spring Boot + Angular 11: Pagination example (Server side)
49.20 GEEK