Published: April 26 2018
Last updated: June 15 2020

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 changePage event

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 ul container element has the class .pagination
  • All li elements have the class .page-item
  • The li containing the "First" link has the class first-item
  • The li containing the "Last" link has the class last-item
  • The li containing the "Previous" link has the class previous-item
  • The li containing the "Next" link has the class next-item
  • All li elements containing page number links have the class number-item
  • All a elements 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

On Twitter or RSS.


When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Comments


Supported by