https://github.com/argodeep/ngx-light-pagination

This is a light weight pagination library built for angular 2+ versions. Less than 15 kb, No Dependencies.
https://github.com/argodeep/ngx-light-pagination

angular angular-cli angular8 javascript npm-package pagination typescript

Last synced: 5 days ago
JSON representation

This is a light weight pagination library built for angular 2+ versions. Less than 15 kb, No Dependencies.

• Host: GitHub
• URL: https://github.com/argodeep/ngx-light-pagination
• Owner: argodeep
• License: mit
• Created: 2019-10-23T18:33:54.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-18T10:15:54.000Z (about 5 years ago)
• Last Synced: 2024-11-09T19:48:42.501Z (2 months ago)
• Topics: angular, angular-cli, angular8, javascript, npm-package, pagination, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ngx-light-pagination
• Size: 3.17 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ngx Light Pagination - by Arghyadeep 

· [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/argodeep/Ngx-Light-Pagination/blob/master/LICENSE) [![npm version](https://img.shields.io/badge/npm-v1.0.9-blue)](https://www.npmjs.com/package/ngx-light-pagination)

This is a light weight pagination library built for angular 2+ versions. Less than 15 kb, No Dependencies. This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.11. Most likely it will work with angular 5, 6, 7, 8. Please [open an issue](https://github.com/argodeep/Ngx-Light-Pagination/issues/new/choose) if you face any bug.

## Features

- Light weight **only 12.8kb**.

- **No Major Dependencies** expect angular browser, core & tslib.

- Supports **prev, next and select page events**.

- Neat & Clean UI.

- 5 points pagination.

- **Fast loading**.

- Intelligent multi color sensing.

- **Dark & Light color theme** supported.

- Custom Style Support will be added soon [Coming Soon]

- 2 More design will be added soon [Coming Soon]

## Demo

![ngx-light-pagination-banner](https://raw.githubusercontent.com/argodeep/Ngx-Light-Pagination/master/ngx-light-pagination.png)

### [View Demo](https://argodeep.github.io/Ngx-Light-Pagination/)

## Install

1. For Installation `npm install --save ngx-light-pagination`.

2. Import ngx light pagination module `import { NgxLightPaginationModule } from 'ngx-light-pagination';` and then `imports: [... NgxLightPaginationModule ]`.

3. Ngx light pagination supports two property binding `[color]` and `[paginationData]`. 

4. You can pass your brand's website/application color `[color]="themeColor"` or `color="#ff0000"`.

5. To pass the pagination data you need to use this binding `[paginationData]="paginationMeta"`.

6. `paginationMeta` should have `perPageItem: number; totalItem: number; currentPage: number; totalPage: number`.

7. Example of `paginationMeta` looks like.

    `this.paginationMeta = {`

    `perPageItem: 5,`

   `totalItem: 50,`

   `currentPage: 3,`

    `totalPage: 10}`

8. Ngx light pagination supports 3 event types - Next page, Previous Page, Any Selected Page. To use the event binding see this part `(onPageChange)="paginationEvents($event)"`. 

9. Emitted event returns an object with Type & Data. Example: Type: 'Previous Page' & Data: 1. Here 1 is the previous page number where user want to go.

8. Complete HTML template example to use for pagination. ``.

**Note:** You can change the variable names as you wish.

## Further help

To get more help [Open Issue](https://github.com/argodeep/Ngx-Light-Pagination/issues/new/choose).