bja-ngx-pagination

Pagination component for angular 2+

* new features in development *

Demo

Demo on Stackblitz

Install with npm:

npm install bja-ngx-pagination --save

In your Angular AppModule:

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

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

// Import your library
import { BjaPagination } from 'bja-ngx-pagination';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BjaPaginationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

use it in Your component template:

<bja-pagination
  (pageChanged)="handlePaginationEvent($event)"
  [currentPage]="page"
  [totalItems]="totalItems"
  [limit]="20"
></bja-pagination>

and handle pagination event in component class:

handlePaginationEvent(event) {
    
    //sample method for fetching data
    this.getPage(event.page);
  }

API

• pageChanged [event handler] - will be invoked when the page was changed.
• currentPage [number] - required - current page number.
• totalItems [number] - required - total number of items.
• limit [number] - required - items per page.
• hideLeftNav [number] - optional - hide left navigation button. Default is false.
• hideRightNav [number] - optional - hide right navigation button. Default is false.

MIT © Adam Kaczmarek