April 26 2018

npm - JW Angular Pagination Component

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 http://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)
  • 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 Angular pagination component is unstyled by default, the component contains the .pagination class so can be styled using bootstrap css (this is what the demo uses), or you can add your own custom styles by targeting the .pagination class in your own css.

 

Web Development Sydney

Feel free to contact me if you're looking for a web developer in Sydney, I also provide remote contracting services for clients outside Sydney.

 


Sponsored by