ngc-pagination
Advanced tools
ngc-pagination - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
@@ -6,4 +6,4 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; | ||
| totalItens: number; | ||
| itensPerPage: number; | ||
| currentPage: number; | ||
| itensPerPage?: number; | ||
| currentPage?: number; | ||
| range?: number; | ||
@@ -37,2 +37,4 @@ change_after?: boolean; | ||
| this.config.subscribe( v => { | ||
| this.useDefaultValues(); | ||
| this.createPagination(); | ||
@@ -44,2 +46,20 @@ this.createExibition(); | ||
| private useDefaultValues() { | ||
| if(!this.config.getValue().currentPage) { | ||
| this.config.getValue().currentPage = 1; | ||
| } | ||
| if(!this.config.getValue().range) { | ||
| this.config.getValue().range = 10; | ||
| } | ||
| if(!this.config.getValue().itensPerPage) { | ||
| this.config.getValue().itensPerPage = 10; | ||
| } | ||
| if(this.config.getValue().change_after === undefined) { | ||
| this.config.getValue().change_after = false; | ||
| } | ||
| } | ||
| public goTo(e, page) { | ||
@@ -84,2 +104,3 @@ | ||
| private createExibition() { | ||
| let start = Math.floor((this.config.getValue().currentPage-1) - this.config.getValue().range/2 < 0 ? 0 : this.config.getValue().currentPage-this.config.getValue().range/2); | ||
@@ -86,0 +107,0 @@ let end = Math.floor(this.config.getValue().currentPage < this.config.getValue().range/2 ? this.config.getValue().range : (this.config.getValue().currentPage) + this.config.getValue().range/2); |
| { | ||
| "name": "ngc-pagination", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "Simple pagination for Angular v2+", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -53,3 +53,3 @@ # ngc-pagination | ||
| 1 - config our pagination | ||
| 1 - Configure the pagination | ||
@@ -76,13 +76,18 @@ ```Typescript | ||
| // pagination config to send to component | ||
| createPagination() { | ||
| this.paginationConfig = new BehaviorSubject({ | ||
| totalItens: 300, | ||
| itensPerPage: 10, | ||
| currentPage: 1, | ||
| range: 10, | ||
| change_after: false | ||
| totalItens: 300, // required | ||
| itensPerPage: 10, // 10 is the default | ||
| currentPage: 1, // 1 is the default | ||
| range: 10, // 10 is the default | ||
| change_after: false // false is the default | ||
| }); | ||
| } | ||
| /* | ||
| change_after property when is true, all user events isn't applied into the view when the | ||
| current page is changed. A good example of your usage is if you want to update the current | ||
| page in the UI only your request is done for example. | ||
| */ | ||
| // to listener ngc-pagination events. | ||
@@ -97,6 +102,8 @@ events(event) { | ||
| 2 - Our pagination template | ||
| 2 - The pagination template | ||
| ```HTML | ||
| <ngc-pagination #pagination [config]="paginationConfig" (paginationEvents)="events($event)"> | ||
| <ngc-pagination #pagination | ||
| [config]="paginationConfig" | ||
| (paginationEvents)="events($event)"> | ||
@@ -155,3 +162,45 @@ <!-- | ||
| Well, with only that you can see this result: | ||
|  | ||
| Cool! With your `BehaviorSubject` you can emit events and the `ngu-pagination` will react the property changes. | ||
| If you need change the currentPage | ||
| ```Typescript | ||
| this.paginationConfig.next({ | ||
| ...this.paginationConfig.getValue(), // with this you get the active properties like totalItens, range... | ||
| currentPage: event.goTo // you only change the currentPage property | ||
| }) | ||
| ``` | ||
| If you need to change the pagination range | ||
| ```Typescript | ||
| this.paginationConfig.next({ | ||
| ...this.paginationConfig.getValue(), | ||
| range: 5 | ||
| }) | ||
| ``` | ||
| If change_after property is true you can update the view after 2s 'simulating a request' | ||
| ```Typescript | ||
| // passing (paginationEvents)="events($event)" to listener ngc-pagination events | ||
| events(event) { | ||
| // simulate request | ||
| setTimeout( () => { | ||
| // update the currentPage UI when only the request is back. | ||
| this.paginationConfig.next({ | ||
| ...this.paginationConfig.getValue(), | ||
| currentPage: event.goTo | ||
| }) | ||
| },2000); | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by17.89%
13468
- Lines of code
- increased by8.77%
186
- Number of lines in readme file
- increased by31.82%
203