npm - JW Angular Pagination Component
Compatible with Angular 2+ (2, 4, 5, 6, 7, 8, 9) and Bootstrap 3 & 4.
This component is based on a previous example I posted showing an Angular 2+ pagination example with logic like Google's search results, I extracted the Angular pagination component from the example and published it to npm to make it easier for people to use.
The source code for the component is available on GitHub at https://github.com/cornflourblue/jw-angular-pagination
Update History:
- 15 Jun 2020 - Updated to be compatible with Angular 9 / Ivy
- 26 Apr 2018 - Built for Angular 2+
Demos
The below examples show the pagination component in action with Angular 9 and Angular 8:
Installation
npm install jw-angular-pagination
Integration with your Angular 2+ app
Import the JwPaginationModule into your app module (app.module.ts) and add it to the imports array to make the <jw-pagination> component available within your Angular module.
This is the app module (app.module.ts) from the Angular 9 example above, the pagination module is imported on line 3 and added to the imports on line 10.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JwPaginationModule } from 'jw-angular-pagination';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
JwPaginationModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
Usage
There are 2 required properties that you need to provide to the Angular pagination component:
- items - the array of items to be paged
- changePage - a callback function for handling the
changePageevent
There are also a couple of optional properties:
- pageSize - the number of items displayed on each page (defaults to 10)
- maxPages - the max number of page links to display in the pagination nav (defaults to 10)
- initialPage - the initial page to display (defaults to 1)
Example Angular component that uses the pagination component
This is the app component (app.component.ts) from the Angular 9 example, it creates a hardcoded array of items to be paged in the ngOnInit() method, and updates the current page of items in the onChangePage() callback method.
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
items = [];
pageOfItems: Array<any>;
constructor() { }
ngOnInit() {
// an example array of 150 items to be paged
this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}`}));
}
onChangePage(pageOfItems: Array<any>) {
// update current page of items
this.pageOfItems = pageOfItems;
}
}
Example Angular component template with the jw-pagination component
This is the app component template (app.component.html) from the Angular 9 example, it renders the current page of items using the *ngFor Angular directive on line 5, and includes the pagination component (<jw-pagination ...>) on line 8.
The pagination component is bound to items property of the app component using the Angular model binding attribute [items]="items", and is bound to the onChangePage() method of the app component using the Angular event binding attribute (changePage)="onChangePage($event)".
<!-- main app container -->
<div class="card text-center m-3">
<h3 class="card-header">Angular 9 Pagination Example</h3>
<div class="card-body">
<div *ngFor="let item of pageOfItems">{{item.name}}</div>
</div>
<div class="card-footer pb-0 pt-3">
<jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
</div>
</div>
Styling the JW Angular Pagination Component
The JW Angular pagination component is unstyled by default, but the component contains the following css classes to be compatible with Bootstrap CSS version 3.x and 4.x (this is what the demo uses):
- The
ulcontainer element has the class.pagination - All
lielements have the class.page-item - The
licontaining the "First" link has the classfirst-item - The
licontaining the "Last" link has the classlast-item - The
licontaining the "Previous" link has the classprevious-item - The
licontaining the "Next" link has the classnext-item - All
lielements containing page number links have the classnumber-item - All
aelements have the class.page-link
If you want to make other customisations such as changing the HTML template of the component, I'd recommend just copying the component code from here on GitHub into your project, it's only 60 lines and will give complete flexibility to make any changes you like.
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!