Welcome folks today in this blog post We will be talking about Pagination in Angular 9 App using ngx-pagination library which is a pm module. I will be providing step by step instructions on how to do it.
Practical Video
Demo
Check out the live demo here: http://michaelbromley.github.io/ngx-pagination/
NPM Command
|
1 2 |
npm install ngx-pagination --save |
Simple Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// app.module.ts import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module import {MyComponent} from './my.component'; @NgModule({ imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module declarations: [MyComponent], bootstrap: [MyComponent] }) export class MyAppModule {} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// my.component.ts import {Component} from '@angular/core'; @Component({ selector: 'my-component', template: ` <ul> <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li> </ul> <pagination-controls (pageChange)="p = $event"></pagination-controls> ` }) export class MyComponent { p: number = 1; collection: any[] = someArrayOfThings; } |
itemsPerPage[number] – required The number of items to display on each page.currentPage[number] – required The current (active) page number.
id[string] If you need to support more than one instance of pagination at a time, set theidand ensure it matches the id attribute of thePaginationControlsComponent/PaginationControlsDirective
totalItems[number] The total number of items in the collection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<pagination-controls id="some_id" (pageChange)="pageChanged($event)" (pageBoundsCorrection)="pageChanged($event)" maxSize="9" directionLinks="true" autoHide="true" responsive="true" previousLabel="Previous" nextLabel="Next" screenReaderPaginationLabel="Pagination" screenReaderPageLabel="page" screenReaderCurrentLabel="You're on page"> </pagination-controls> |
