ngx-pagination

What is ngx-pagination?

ngx-pagination is an Angular library that provides a simple and flexible way to add pagination to your Angular applications. It is easy to integrate and customize, making it a popular choice for handling paginated data in Angular projects.

What are ngx-pagination's main functionalities?

Basic Pagination

This feature allows you to add basic pagination controls to your Angular application. The `pageChange` event is emitted whenever the page is changed, and you can handle it in your component.

<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

Server-Side Pagination

This feature demonstrates how to implement server-side pagination using ngx-pagination. You can fetch data from a server based on the current page and page size, and update your component accordingly.

this.http.get(`https://api.example.com/items?page=${this.currentPage}&size=${this.pageSize}`).subscribe(data => { this.items = data.items; this.totalItems = data.totalItems; });

Custom Template

This feature allows you to customize the pagination controls using an Angular template. You can define your own template for the pagination controls to match your application's design.

<pagination-controls (pageChange)="pageChanged($event)"><ng-template let-page="page">Page {{ page }}</ng-template></pagination-controls>

Other packages similar to ngx-pagination

ngx-bootstrap

ngx-bootstrap is a popular Angular library that provides a wide range of Bootstrap components, including pagination. It offers more comprehensive functionality beyond just pagination, making it a good choice if you need other Bootstrap components in your project.

ng2-pagination

ng2-pagination is another Angular library for pagination. It is similar to ngx-pagination in terms of functionality but may have different customization options and API. It is a good alternative if you are looking for a different implementation of pagination in Angular.

angular2-pagination

angular2-pagination is a lightweight Angular library for pagination. It provides basic pagination functionality and is easy to integrate into your Angular application. It is a good choice if you need a simple and minimalistic pagination solution.

README

ngx-pagination

The simplest solution for pagination in Angular.

Demo

Check out the live demo here: http://michaelbromley.github.io/ngx-pagination/

Play with it on StackBlitz here: https://stackblitz.com/edit/angular-e1f9hq

Documentation

For full documentation, see https://github.com/michaelbromley/ngx-pagination/blob/master/README.md

Changelog

6.0.3 (2022-11-21)

Fixes

• Include license data in published package.json. Fixes (#400)