ngc-pagination

Simple pagination for Angular v4+

Demo

Installation

First you need to install the npm module:

npm install ngc-pagination --save

Usage

1. Import the NgcPaginationModule:

Finally, you can use ngc-pagination in your Angular project.

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

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

SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the NgcPaginationModule to make sure you don't have to import it in every module.

@NgModule({
    exports: [
        CommonModule,
        NgcPaginationModule
    ]
})
export class SharedModule { }

Sample

1 - Configure the pagination

    import { NgcPaginationModel } from 'ngc-pagination';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';

    /*

    @Component({ ... });

    */

    export class MyComponent {

        private paginationConfig: BehaviorSubject<NgcPaginationModel>;

        constructor() {
            createPagination();
        }

        // pagination config to send to component
        createPagination() {
            this.paginationConfig = new BehaviorSubject({
                totalItens: 300, // required
                itensPerPage: 10, // 10 is the default
                currentPage: 1, // 1 is the default
                range: 10, // 10 is the default
                change_after: false, // false is the default,
                disabledWhenChange: false // false is the default
            });
        }

        // to listener ngc-pagination events.
        events(event) {
            console.log(event);
        }
    }

2 - The pagination template

<ngc-pagination #pagination
     [config]="paginationConfig"
     (paginationEvents)="events($event)">

     <!--

        Note the `#pagination` template variable above is used in the html below to get the component reference, you can change to any name.


        WARNING, I'm using the Angular Material buttons with mat-button directive and <mat-icon>
          component to show icons in this template, if you're not using the Angular Material in your
          project you need to remove the all directives mat-button in all <button> tags below and also
          remove all <mat-icon> components.

     -->

      <button mat-button
      (click)="pagination.goTo('firstPage')"
      [disabled]="pagination.config.getValue().currentPage <= 1 || pagination.buttonsDisabled">
        <mat-icon>
          first_page
        </mat-icon>
      </button>

      <button mat-button
      (click)="pagination.goTo('prevPage')"
      [disabled]="pagination.config.getValue().currentPage <= 1 || pagination.buttonsDisabled">
        <mat-icon>
          chevron_left
        </mat-icon>
      </button>

      <button class="page" mat-button
      *ngFor="let page of pagination.config.getValue().exibition"
      [class.active]="page === pagination.config.getValue().currentPage"
      [disabled]="pagination.buttonsDisabled"
      (click)="page !== pagination.config.getValue().currentPage ? pagination.goTo('pageChanged', page) : undefined">
        {{page}}
      </button>

      <button mat-button
      (click)="pagination.goTo('nextPage')"
      [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages || pagination.buttonsDisabled">
        <mat-icon>
          chevron_right
        </mat-icon>
      </button>

      <button mat-button (click)="pagination.goTo('lastPage')"
      [disabled]="pagination.config.getValue().currentPage >= pagination.config.getValue().totalPages || pagination.buttonsDisabled">
        <mat-icon>
          last_page
        </mat-icon>
      </button>
</ngc-pagination>

Well, with only that you can see this result:

Cool! Now your BehaviorSubject you can emit events and the ngc-pagination will react the property changes.

You can change the currentPage anytime

      this.paginationConfig.next({
        ...this.paginationConfig.getValue(), // with this you're reusing the active properties like totalItens, range...
        currentPage: event.goTo // you only change the currentPage property
      })

If you need to change the pagination range

      this.paginationConfig.next({
        ...this.paginationConfig.getValue(), //reusing the values...
        range: 5 // change only range property
      })

API

change_after property when is true, all user events isn't applied into the view when the current page is changed. A good example of your usage is if you want to update the current page in the UI when the request is done for example.

Sample:

If change_after property is true the view is updated after 2s 'simulating a request'

      createPagination() {
          this.paginationConfig = new BehaviorSubject({
              totalItens: 300,
              change_after: true
          });
      }

      // passing (paginationEvents)="events($event)" to listener ngc-pagination events
      events(event) {
        // simulate request
        setTimeout( () => {

          // update the currentPage UI only when the 'simulate request is back' after 2s
          this.paginationConfig.next({
            ...this.paginationConfig.getValue(),  // get initial values
            currentPage: event.goTo
          })

        },2000);
      }

See the behavior below when that code run:

disabledWhenChange property when is true, any button is clicked, all buttons is disabled and the pagination wait for the next() method to enable buttons

Sample:

  createPagination() {
    this.paginationConfig = new BehaviorSubject({
        totalItens: 300,
        change_after: true,
        disabledWhenChange: true
    });

      // passing (paginationEvents)="events($event)" to listener ngc-pagination events
      events(event) {
        // simulate request
        setTimeout( () => {
          // simulate send new values
          this.paginationConfig.next({
            ...this.paginationConfig.getValue(), // get the first values
            currentPage: event.goTo
          })

        },1000);
      }
}

See the behavior below when that code run: