A bootstrap(4) based angular(4+) pagination module.
MIT License
ngx-pagination-bootstrap
is Bootstrap(4) based pagination module for Angular(2+) applications.
npm install ngx-pagination-bootstrap
npm install [email protected] --save-dev
angular-cli.json
to be build of your build process.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
[email protected]
is supported till v1.5.0
.v4.0.0
supported from v1.6.0
onwards.PaginationModule
from ngx-pagination-bootstrap
:import { PaginationModule } from 'ngx-pagination-bootstrap'
PaginationModule
to the imports of your NgModule:@NgModule({
imports: [
...,
PaginationModule
],
...
})
class YourModule { ... }
<ng-pagination></ng-pagination>
in your templates to add pagination in your view like below<ng-pagination [position]="'left'" [pageSize]="10" [itemsCount]="data.length" [data]="data" (getPageData)="getPageData($event)"></ng-pagination>
pageSize: number
- Size of a page i.e number of items to be displayed in one page.itemsCount: number
- total no of itmes that needs ro be paged/total no of records.position: string
- position of the pagination respect to parent contrainer of your pagination component.data: Array
- Optional | the data needs to be paged default is null. If pagination is handled by api no need of data.getPageData: EventEmitter
- emmited when user navigates to a page. Caputure this and update you view data. The events contains the following info{
event: event: Event,
pageNo: pageNo: number,
pageSize:pageSize: number,
data: null| Array,
}
null
if data was not passed and you can fetch data from your api or the way you want it to handle Added support for Observable Data Source.
Current items range display bug when itemcount 0 bug fix .
Angular 4.0.0 support added
Minor bug fixes
Bootstrap 4.0.0 supported
Range of items hidden on small devices
Found a bug or an issue with this? Open a new issue here on GitHub.
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.