shk-ng-pagination

ShaikounNgPagination Lib

This package library was created by Ahmed Shaikoun to help those wanted a quick and powerful pagination with minimum effort to install and use.

Release Info

This is a beta release!.

Install It

Type this command to install my pagination:
npm i shk-ng-pagination

How To Use It

1. import ShkNgPaginationModule from 'shk-ng-pagination'.
2. insert ShkNgPaginationModule into NgModule imports:[] list.
3. use it in html like that example:
   <shk-ng-pagination [totalCount]="100" [pageNumber]="1" [pageSize]="5" (pageNumberChanged)="onPageNumberChanged($event)" (totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>
4. to track every change from pagination in your component import PageValue from 'shk-ng-pagination'.
5. define a handler for event pageNumberChanged like that:
   onPageNumberChanged(value: PageValue<number>): void {
console.log(JSON.stringify(value));
}
6. define a handler for event totalPagesChanged like that:
   onTotalPagesChanged(value: PageValue<number>): void {
console.log(JSON.stringify(value));
}
7. you can control the count of pages that displayed left and right of selected page using property pagesCountRightLeftSelection where the minimum value is 1 and the maximum value is 7, so if you want to make pagination displayes 7 buttons for 7 pages every time you can supply pagesCountRightLeftSelection property with value 3 like this example:
   <shk-ng-pagination [totalCount]="100" [pageNumber]="1" [pageSize]="5" [pagesCountRightLeftSelection]="3"
(pageNumberChanged)="onPageNumberChanged($event)" (totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>
   and if you want to make pagination displayes 3 buttons for only 3 pages every time you can supply pagesCountRightLeftSelection property with value 1 like this example:
   <shk-ng-pagination [totalCount]="100" [pageNumber]="1" [pageSize]="5" [pagesCountRightLeftSelection]="1"
(pageNumberChanged)="onPageNumberChanged($event)" (totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>
8. Starting from release version 1.0.55 this pagination provides you with full control over displaying page up and page down buttons and the range of page up and down, where the default value of page up and down range is 5 and the buttons of page up and page down is displayed by default, you can control the page up and page down buttons and range like this example:
   <shk-ng-pagination [totalCount]="100"
[pageNumber]="1"
[pageSize]="5"
[usePageUp]="true"
[usePageDown]="true"
[pageUpDownRange]="5"
(pageNumberChanged)="onPageNumberChanged($event)"
(totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>

Style

Starting from version 1.0.6 it has a default theme which is white theme and starting from version 1.0.8 it has provided with two themes 'white' and 'dark' and you can switch between them like this example:
<shk-ng-pagination [totalCount]="100"
[pageNumber]="1"
[pageSize]="5"
[theme]="'dark'"
(pageNumberChanged)="onPageNumberChanged($event)"
(totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>
Or
<shk-ng-pagination [totalCount]="100"
[pageNumber]="1"
[pageSize]="5"
[theme]="'white'"
(pageNumberChanged)="onPageNumberChanged($event)"
(totalPagesChanged)="onTotalPagesChanged($event)"></shk-ng-pagination>

It do not need a bootstrap to style it.

Road Map

This is just a start, and this pagination is still under development to include more features to this tool like displayed pages options and themes and more.

Contact Me

You can contact me for any issue by sending mail to my email address which is:
[e-mail]

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Keywords

pagination, shaikoun-ng-pagination, shk-ng-pagination.