NgxPaginate
Angular pagination component for your grid (or any other form of data). It's just concerned of remembering current page state.
It calculates how many pages it needs/can display for user to select from based on current page, page size and total items.
Usage
npm install ngx-paginate --save
Import module
;
Use in your component:
Where page is of type PageState (comes with component as well):
Options are type of PaginateOptions (comes with component as well):
Default options are:
const defaults: PaginateOptions = { spanPages : 2, previousPage: true, nextPage: true, firstPage: true, lastPage: true, titles: { firstPage: 'First', previousPage: 'Previous', lastPage: 'Last', nextPage: 'Next', pageSize: 'Items per page' }, pageSizes: [{ value: 5, display: '5' }, { value: 10, display: '10' }, { value: 15, display: '15' }]};
And pageChange is triggered each time page is changed via component:
pageChangepageState: PageState
Customize colors
To modify how each page entry would look like you need to provide some css overrides in your component (::ng-deep)
.page-entry
- each page number entry
and
.page-entry.active
- active page entry
For example
ngx-paginate ::ng-deep .page-entry ngx-paginate ::ng-deep .page-entry.active
Changelog
Changelog
[2.0.1] - 2019-08-13
BREAKING CHANGES:
- not triggering pageChange on init (kind of bugfix)
[2.0.0] - 2019-08-13
BREAKING CHANGES:
- (pageChange) not emitted when changing page size. New event emitter added called pageSizeChange
[1.1.0] - 2019-04-04
Improved build system.
BREAKING CHANGES:
Importing should be done differently. Instead of using:
import { NgxPaginateModule } from 'ngx-paginate/ngx-paginate';
use
import { NgxPaginateModule } from 'ngx-paginate';