Pagination library for use with angular projects.
NPM - Node Package Manager
Click here to see the demo application
npm install jjwins-pagination
Import PaginationModule from jjwins-pagination in your module.ts file and add PaginationModule to the import array of module.ts file
import { PaginationModule } from 'jjwins-pagination'
imports: [
...
PaginationModule
...
]
To render the pagination in your application add pto your component.html file
will take 2 input data [data] & [displayData]
file.component.html
<jjwins-pagination [data]="data" [displayData]="displayData"></jjwins-pagination>
In your component.ts file add properties data and displayData Important!
- data takes an array as value
-
displayData takes an object with key:value {totalDataCount: number, itemsPerPage: number}
- totalDataCount refers to the total number of data present in the array
-
itemsPerPage refers to the number of data to be displayed on one page
Note: Provide these values in the component.ts file
Import PaginationService from jjwins-pagination and inject in the constructor. Then subscribe to the latestdata of the pagination service after a timeout of 300 millisecond to receive the latest data.
Note: The timeout is required to avoid data changes after rendering the virtual DOM
- Then use the latest data received from the pagination service to render the table in the template
import { PaginationService } from 'jjwins-pagination'
...
latestData: any;
constructor( private _pagination: PaginationService) { }
ngOnInit() {
setTimeOut(() => {
this._pagination.latestData.subscribe((data) => {
this.latestData = data;
})
}, 300)
}
...
- To align the pagination use html 'align' attribute
<jjwins-pagination [data]="data" [displayData]="displayData" align="center"></jjwins-pagination>- By default the pagination is left aligned
- It can be center or right aligned with values 'center' or 'right' in the align attribute