https://github.com/gustavocostaw/ngc-pagination
Simple pagination for Angular v4+ Demo: http://bit.ly/2xHWXWR
https://github.com/gustavocostaw/ngc-pagination
angular pagination pagination-components
Last synced: 8 months ago
JSON representation
Simple pagination for Angular v4+ Demo: http://bit.ly/2xHWXWR
- Host: GitHub
- URL: https://github.com/gustavocostaw/ngc-pagination
- Owner: GustavoCostaW
- License: mit
- Created: 2017-07-05T18:27:27.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-15T18:47:22.000Z (over 8 years ago)
- Last Synced: 2025-09-14T20:01:19.964Z (9 months ago)
- Topics: angular, pagination, pagination-components
- Language: TypeScript
- Homepage:
- Size: 40 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngc-pagination
Simple pagination for Angular v4+
## [`Demo`](http://bit.ly/2xHWXWR)
## Installation
First you need to install the npm module:
```sh
npm install ngc-pagination --save
```
## Usage
#### 1. Import the `NgcPaginationModule`:
Finally, you can use `ngc-pagination` in your Angular project.
```ts
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`](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-modules) 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.
```ts
@NgModule({
exports: [
CommonModule,
NgcPaginationModule
]
})
export class SharedModule { }
```
## Sample
1 - Configure the pagination
```Typescript
import { NgcPaginationModel } from 'ngc-pagination';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
/*
@Component({ ... });
*/
export class MyComponent {
private paginationConfig: BehaviorSubject;
constructor() {
createPagination();
}
// pagination config to send to component
createPagination() {
this.paginationConfig = new BehaviorSubject({
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,
disabledWhenChange: false // false is the default
});
}
// to listener ngc-pagination events.
events(event) {
console.log(event);
}
}
```
2 - The pagination template
```HTML
first_page
chevron_left
{{page}}
= pagination.config.getValue().totalPages || pagination.buttonsDisabled">
chevron_right
= pagination.config.getValue().totalPages || pagination.buttonsDisabled">
last_page
```
Well, with only that you can see this result:
Cool! Now your `BehaviorSubject` you can emit events and the `ngc-pagination` will react the property changes.
You can change the `currentPage` anytime
```Typescript
this.paginationConfig.next({
...this.paginationConfig.getValue(), // with this you're reusing 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(), //reusing the values...
range: 5 // change only range property
})
```
## 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'
```Typescript
createPagination() {
this.paginationConfig = new BehaviorSubject({
totalItens: 300,
change_after: true
});
}
// passing (paginationEvents)="events($event)" to listener ngc-pagination events
events(event) {
// simulate request
setTimeout( () => {
// update the currentPage UI only when the 'simulate request is back' after 2s
this.paginationConfig.next({
...this.paginationConfig.getValue(), // get initial values
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:
```Typescript
createPagination() {
this.paginationConfig = new BehaviorSubject({
totalItens: 300,
change_after: true,
disabledWhenChange: true
});
// passing (paginationEvents)="events($event)" to listener ngc-pagination events
events(event) {
// simulate request
setTimeout( () => {
// simulate send new values
this.paginationConfig.next({
...this.paginationConfig.getValue(), // get the first values
currentPage: event.goTo
})
},1000);
}
}
```
See the behavior below when that code run:
