Angular 11 Pagination example

Tien Nguyen - Dec 28 '20 - - Dev Community

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:

Alt Text

Our Angular 11 app will display the result with pagination:

Alt Text

You can change to a page with larger index:

Alt Text

Or change quantity of items per page:

Alt Text

Or paging with filter:

Alt Text

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

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
}
Enter fullscreen mode Exit fullscreen mode

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/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .