In this tutorial, I will show you how to make Angular 11 Pagination example with existing API (server-side pagination) using ngx-pagination.

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

Overview of Angular 11 Pagination example

One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have tutorials table in database like this:

Our Angular 11 app will display the result with pagination:

You can change to a page with larger index:

Or change quantity of items per page:

Or paging with filter:

The API for this Angular client can be found at one of following posts:

• Node.js Express Pagination with MySQL
• Node.js Express Pagination with PostgreSQL
• Node.js Express Pagination with MongoDB
• Spring Boot Pagination & Filter example | Spring JPA, Pageable - Spring Boot MongoDB Pagination example with Spring Data

These Servers will exports API for pagination (with/without filter), here are some url samples:

• /api/tutorials?page=1&size=5
• /api/tutorials?size=5: using default value for page
• /api/tutorials?page=1: using default value for size
• /api/tutorials?title=data&page=1&size=3: pagination & filter by title containing 'data'

This is structure of the response (server-side pagination) for the HTTP GET request:

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

This is a kind of server-side paging, where the server sends just a single page at a time. ngx-pagination supports this scenario, so We actually only need to use tutorials and totalItems when working with this library.

Technology

• Angular 11
• RxJS 6
• ngx-pagination 5

For more details, implementation and Github, please visit:
https://bezkoder.com/angular-11-pagination-ngx/