ngx-pager

A pagination plugins for Angular.

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.

Table of contents:

• Getting started
  • Installation
  • Implementation
  • Settings Option
• Demo
• Creators
• License

Getting started

Installation

npm install ngx-pager --save

Implementation

import "NgxPagerModule" in your application module. For example: app.module.ts

import {NgxPagerModule} from  'ngx-pager';
@NgModule({
    imports:[
	    NgxPagerModule
	    ...
    ]
})
export  class  AppModule { }

add styles in your application stylesheets. For example: styles.scss

@import  "~ngx-pager/themes/ngx-pager";

add configration in your component. For example : app.component.ts

import {HttpClient} from  '@angular/common/http';

export  class  AppComponent  implements  OnInit {
pagerConfig: any = null;
totalRow: any = null;
result: Array<any> = [];

constructor(private  http:  HttpClient){}
ngOnInit() {
   this.pagerConfig  = {
	    perPage:3,
		displayPageCount:  3,
		firstLastView:true,
		    render: (page)=> {
				this.http.get('<API URL>')
				.subscribe((responseData:any)=>{
					this.totalRow = responseData.totalRows;
					this.result = responseData.list;
				})
			}
		};
    }
}

			

If want to change the url with query string after every page change, append redirect parameter with config.For example: url like http://localhost:4200/home?page=1

redirect : {
  type :'q', // q=query string
  param : 'page'// param name
},

If want to change the url with url parames after every page change, append redirect parameter with config. For example: url like http://localhost:4200/home/flag-one/1/flag-two

redirect: {
	type :  'p',
	param: {
		path :  './home',
		name :  'page',
		params: {
		    flagOne: 'flag-one',
			page:  null,
			flagTwo: 'flag-two'
		}
   }
},

Add ngx-pager html tag in your component html. For example : app.component.html

<ngx-pager  [config]="pagerConfig"  [totalrow]='totalRow'></ngx-pager>

• [config] : to set the pagination configuration
• [totalrow]: to set the total rows of data list

Settings Option

| |Description |Default Value |Required | |----------------|-------------------------------|-----------------------------|-----------------------------| |perPage| number of records display in every page | | yes | |displayPageCount| number of pages show in pagination panel | 3 | | |simple| only show next and prev buttons | false | | |firstLastView| first last buttons will display | false | | |redirect| redirection configuration after click on page button | | | |redirect.type| page render with query string or page parameter | q=query string, p= url params | yes| |redirect.param| if redirect.type=q name of the query string parameter. For example: http://current-url?page=1. redirect.param='page' | | yes| |redirect.param.path| if redirect.type=p name of the url. for example: redirect.param.path='./home' | | yes(only redirect.type=p)| | redirect.param.name | if redirect.type=p name of the url params which content the page no. for example: http://current-url/{page}/{slug_1}/{slug_2}. redirect.param.name='page' | | yes(only redirect.type=p)| | redirect.param.params | if redirect.type=p all url params list. it's object type data. For example: redirect.param.params = { "page":null, "slug_1":"cont-1", "slug_2":"cont-2" } | | yes(only redirect.type=p)| | customContent| to change the prev,next,first,last button html | {"prev":"❮", "next":"❯", "first":"❮ ❮", "last":"❯ ❯"} | | | render| event to rendering the list with paginnation | | yes |

Demo

Click Here for the demo

Creator

Tonmoy Nandy

• @GitHub

License

The MIT License (MIT)