Simple pagination for Angular v4+
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,
disabledWhenChange: 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 || pagination.buttonsDisabled">
<md-icon class="material-content-icon">
first_page
</md-icon>
</button>
<button md-button
(click)="pagination.goTo('prevPage')"
[disabled]="pagination.config.getValue().currentPage <= 1 || pagination.buttonsDisabled">
<md-icon class="material-content-icon">
chevron_left
</md-icon>
</button>
<button class="page" md-button
*ngFor="let page of pagination.config.getValue().exibition"
[class.active]="page === pagination.config.getValue().currentPage"
[disabled]="pagination.buttonsDisabled"
(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 || pagination.buttonsDisabled">
<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 || pagination.buttonsDisabled">
<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.
You can change the currentPage
anytime
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
})
API
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 when the request is done for example.
Sample:
If change_after
property is true
the view is updated 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:
disabledWhenChange
property when is true, any button is clicked, all buttons is disabled
and the pagination wait for the next()
method to enable buttons
Sample:
createPagination() {
this.paginationConfig = new BehaviorSubject({
totalItens: 300,
change_after: true,
disabledWhenChange: true
});
events(event) {
setTimeout( () => {
this.paginationConfig.next({
...this.paginationConfig.getValue(),
currentPage: event.goTo
})
},1000);
}
}
See the behavior below when that code run: