pagination-jnf v0.0.2

Pagination

pagination library for angular

Installation

Install via NPM...

$ npm i pagination-jnf

Usage

set module in app.module or parent module

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PaginationModule } from 'pagination-jnf';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PaginationModule // pagination module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Base Config

<lib-pagination [configValue]="configValue"></lib-pagination>

...
import { PaginationConfigValueModel } from 'pagination-jnf';
.
.
.
export class AppComponent {
  configValue: PaginationConfigValueModel; // for create pagination number list and get totalPages

  constructor() {
    this.configValue = {
      pageSize: 10,
      totalCount: 36
    };
  }

  getPageNumber(event: number): void{
    let pageNumber = event;
  }
}

Individual Options

Setting Individual Options

<lib-pagination [configValue]="configValue"  [configIndividual]="configIndividual" (pageNumber)="getPageNumber($event)"></lib-pagination>

  import { PaginationConfigIndividualModel } from 'pagination-jnf';


  configIndividual: PaginationConfigIndividualModel = {
    rtlMode: true, // for check design direction default is false
    classes: { // your className Individual 
        parentClass: 'your className for parent holder all box pagination ',
        parentListClass: 'your className for holder pagination numbers list',
        itemClass: 'your className for items pagination',
        itemSpaceClass: 'your className for "..."',
        itemArrowClass: 'your className for arrows',
    },
    arrow: { // your arrows html Individual
        next: '<i class="fa-regular fa-arrow-right"></i>',
        prev: '<i class="fa-regular fa-arrow-left"></i>',
    }
  };

GitHub @nasirfarhadi92  ·  linkedin @nasir-farhadi