Spring Boot + Angular: Pagination example
Tags: angular, springboot, javascript, webdev
Published: 2021-01-03 07:54:09

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

Full Article: [https://bezkoder.com/pagination-spring-boot-angular-11/](https://bezkoder.com/pagination-spring-boot-angular-11/)

<h2>Pagination with Angular & Spring Boot example</h2>
Assume that we have tutorials table in database like this:

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-database.png" alt="spring-boot-angular-11-pagination-example-database" width="551" height="728" class="alignnone size-full wp-image-6388" />

We need to export APIs for pagination (with/without filter) as following samples:
<ul>
	<li><code>/api/tutorials?page=1&size=3</code></li>
	<li><code>/api/tutorials?size=5</code>: using default value for page</li>
	<li><code>/api/tutorials?title=data&page=1&size=5</code>: pagination & filter by title containing 'data'</li>
	<li><code>/api/tutorials/published?page=2</code>: pagination & filter by 'published' status</li>
</ul>

This is structure of the result that we want to get from the APIs:
```json
{
    "totalItems": 12,
    "tutorials": [...],
    "totalPages": 3,
    "currentPage": 1
}
```

Our Angular app will display the result with pagination:

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-default-paging.png" alt="spring-boot-angular-11-pagination-example-default-paging" width="660" height="462" class="alignnone size-full wp-image-6389" />

You can change to a page with larger index:

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-change-page.png" alt="spring-boot-angular-11-pagination-example-change-page" width="660" height="460" class="alignnone size-full wp-image-6390" />

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

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-change-items-per-page.png" alt="spring-boot-angular-11-pagination-example-change-items-per-page" width="660" height="610" class="alignnone size-full wp-image-6391" />

Or paging with filter:

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-paging-filter.png" alt="spring-boot-angular-11-pagination-example-paging-filter" width="660" height="600" class="alignnone size-full wp-image-6392" />

<h2>Full-stack Architecture</h2>
We're gonna build the application with following architecture:

<img src="https://bezkoder.com/wp-content/uploads/2020/12/spring-boot-angular-11-pagination-example-architecture.png" alt="spring-boot-angular-11-pagination-example-architecture" width="700" height="250" class="alignnone size-full wp-image-6393" />

- Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using Spring Data.
- Angular 11/10/8 Client sends HTTP Requests and retrieve HTTP Responses using <strong>axios</strong>, 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/](https://bezkoder.com/pagination-spring-boot-angular-11/)

## Further Reading
- <a href="https://bezkoder.com/integrate-angular-spring-boot/">How to Integrate Angular with Spring Boot Rest API</a>

Fullstack CRUD App:
- <a href="https://bezkoder.com/angular-11-spring-boot-crud/">Angular + Spring Boot + MySQL example</a>
- <a href="https://bezkoder.com/angular-11-spring-boot-postgresql/">Angular + Spring Boot + PostgreSQL example</a>
- <a href="https://bezkoder.com/angular-11-spring-boot-mongodb/">Angular + Spring Boot + MongoDB example</a>

Or Security: <a href="https://bezkoder.com/angular-11-spring-boot-jwt-auth/">Angular 11 + Spring Boot: JWT Authentication example</a>

Happy learning, see you again!