April 26 2018

npm - JW Angular Pagination Component

Compatible with Angular 2+ (2, 4, 5, 6, 7, 8) 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

Demo

The GitHub repo contains a demo of the pagination component that you can run locally by running npm install followed by npm start in a terminal window from the /demo directory of the project.

Here it is in action: (See on Plunker at https://plnkr.co/edit/OKOt3M?p=preview)

Installation

npm install jw-angular-pagination

Integration with your Angular 2+ app

Import the pagination component into your Angular app.module.ts and add it to the declarations array. Here's the app module from the demo in the project's GitHub repo:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent }  from './app.component';

// import pagination component
import { JwPaginationComponent } from 'jw-angular-pagination';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule
    ],
    declarations: [
        AppComponent,

        // add pagination component to declarations
        JwPaginationComponent
    ],
    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

Here's the app.component.ts code from the demo app showing a dummy list of items being retrieved via http and passed to the angular pagination component in the below template:

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    constructor(private http: Http) { }

    // array of all items to be paged
    items: Array<any>;

    // current page of items
    pageOfItems: Array<any>;

    ngOnInit() {
        // get dummy data
        this.http.get('./dummy-data.json')
            .map((response: Response) => response.json())
            .subscribe(data => {
                // set items to json response
                this.items = data;
            });
    }

    onChangePage(pageOfItems: Array<any>) {
        // update current page of items
        this.pageOfItems = pageOfItems;
    }
}


Example Angular component template with the jw-pagination component

Here's the app.component.html template from the demo app showing the html for displaying the current page of items and the pagination component:

<div>
    <div class="container">
        <div class="text-center">
            <h1>Angular Pagination Component Demo</h1>

            <!-- items being paged -->
            <div *ngFor="let item of pageOfItems">{{item.name}}</div>

            <jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
        </div>
    </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 github into your project, it's only 60 lines and will give complete flexibility to make any changes you like - https://github.com/cornflourblue/jw-angular-pagination/blob/master/src/jw-pagination.component.ts.

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Sponsored by