Simple pagination for Angular v2+
Installation
First you need to install the npm module:
npm install ngc-pagination --save
Usage
Finally, you can use ngc-pagination
in your Angular project.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgcPaginationModule} from 'ngc-pagination';
@NgModule({
imports: [
BrowserModule,
NgcPaginationModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
SharedModule
If you use a SharedModule
that you import in multiple other feature modules,
you can export the NgcPaginationModule
to make sure you don't have to import it in every module.
@NgModule({
exports: [
CommonModule,
NgcPaginationModule
]
})
export class SharedModule { }
Sample
1 - Configure the pagination
import { NgcPaginationModel } from 'ngc-pagination';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export class MyComponent {
private paginationConfig: BehaviorSubject<NgcPaginationModel>;
constructor() {
createPagination();
}
createPagination() {
this.paginationConfig = new BehaviorSubject({
totalItens: 300,
itensPerPage: 10,
currentPage: 1,
range: 10,
change_after: false
});
}
events(event) {
console.log(event);
}
}
2 - The pagination template
<ngc-pagination #pagination
[config]="paginationConfig"
(paginationEvents)="events($event)">
<button md-button
(click)="pagination.goTo('firstPage')"
[disabled]="pagination.config.getValue().currentPage <= 1">
<md-icon class="material-content-icon">
first_page
</md-icon>
</button>
<button md-button
(click)="pagination.goTo('prevPage')"
[disabled]="pagination.config.getValue().currentPage <= 1">
<md-icon class="material-content-icon">
chevron_left
</md-icon>
</button>
<button md-button
class="page" *ngFor="let page of pagination.config.getValue().exibition"
[class.active]="page === pagination.config.getValue().currentPage"
(click)="page !== pagination.config.getValue().currentPage ? pagination.goTo('pageChanged', page) : undefined">
{{page}}
</button>
<button md-button
(click)="pagination.goTo('nextPage')"
[disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages"
class="material-content-icon">
<md-icon class="material-content-icon">
chevron_right
</md-icon>
</button>
<button md-button
(click)="pagination.goTo('lastPage')"
[disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages"
class="material-icons">
<md-icon class="material-content-icon">
last_page
</md-icon>
</button>
</ngc-pagination>
Well, with only that you can see this result:
Cool! With your BehaviorSubject
you can emit events and the ngc-pagination
will react the property changes.
If you need change the currentPage
this.paginationConfig.next({
...this.paginationConfig.getValue(),
currentPage: event.goTo
})
If you need to change the pagination range
this.paginationConfig.next({
...this.paginationConfig.getValue(),
range: 5
})
If change_after
property is true
you can update the view after 2s 'simulating a request'
createPagination() {
this.paginationConfig = new BehaviorSubject({
totalItens: 300,
change_after: true
});
}
events(event) {
setTimeout( () => {
this.paginationConfig.next({
...this.paginationConfig.getValue(),
currentPage: event.goTo
})
},2000);
}
See the behavior below when that code run: