This Angular Library can help you to implement an easy pagination. (Needs some server side)

To install this library, run:

$ npm install @pluritech/pagination --save

Once you have installed the library with npm, you need now to import PaginationModule in your main application module:

and then from your Angular AppModule:

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

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


// Import pagination library
import { PaginationModule } from '@pluritech/pagination';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify the library in imports
    PaginationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use the pagination component like the following:

<pluritech-pagination 
  [total]="500" 
  [limit]="9"
  (changePage)="handleChangePage($event)">
</pluritech-pagination>

The pagination component has some events. You can click directly in a page, or, you can click in one of the arrow-buttons (right/left), when you do it an event will be emitted with the following data (JavaScript object):

You can also change the pages pressing the mouse on the arrow-buttons, in this case, the event will be emitted only when the mouse leaves the button or on the mouseup event.

Generator Angular 2 Library

MIT © Lucas C. Correa && Mateus Duraes