{"id":14973601,"url":"https://github.com/manishjanky/ngx-pagination-bootstrap","last_synced_at":"2025-10-27T01:30:43.432Z","repository":{"id":39045678,"uuid":"115601877","full_name":"manishjanky/ngx-pagination-bootstrap","owner":"manishjanky","description":"A bootstrap(4) based angular(4+) pagination module.","archived":false,"fork":false,"pushed_at":"2018-04-22T10:13:54.000Z","size":412,"stargazers_count":5,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T01:26:21.839Z","etag":null,"topics":["angular","angular-components","angular2","angular4","bootstrap","bootstrap4","ngx","pagination"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manishjanky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-28T08:21:48.000Z","updated_at":"2020-03-04T06:08:39.000Z","dependencies_parsed_at":"2022-09-19T22:07:13.442Z","dependency_job_id":null,"html_url":"https://github.com/manishjanky/ngx-pagination-bootstrap","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-pagination-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-pagination-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-pagination-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-pagination-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manishjanky","download_url":"https://codeload.github.com/manishjanky/ngx-pagination-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418235,"owners_count":19468869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-components","angular2","angular4","bootstrap","bootstrap4","ngx","pagination"],"created_at":"2024-09-24T13:49:00.977Z","updated_at":"2025-10-27T01:30:42.830Z","avatar_url":"https://github.com/manishjanky.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-pagination-bootstrap\n\n[![GitHub license](https://img.shields.io/github/license/manishjanky/ngx-pagination-bootstrap.svg)](https://github.com/me-and/mdf/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/ngx-pagination-bootstrap.svg)]()\n[![Build Status](https://travis-ci.org/manishjanky/ngx-pagination-bootstrap.svg?branch=master)](https://travis-ci.org/manishjanky/ngx-pagination-bootstrap)\n[![Codecov branch](https://codecov.io/gh/manishjanky/ngx-pagination-bootstrap/branch/master/graphs/badge.svg)]()\n[![npm](https://img.shields.io/npm/dt/ngx-pagination-bootstrap.svg)]()\n[![GitHub top language](https://img.shields.io/github/languages/top/manishjanky/ngx-pagination-bootstrap.svg)]()\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/manishjanky/ngx-pagination-bootstrap.svg)]()\n[![GitHub issues](https://img.shields.io/github/issues/manishjanky/ngx-pagination-bootstrap.svg)]()\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/manishjanky/ngx-pagination-bootstrap.svg)]()\n[![GitHub contributors](https://img.shields.io/github/contributors/manishjanky/ngx-pagination-bootstrap.svg)]()\n\n`ngx-pagination-bootstrap` is Bootstrap(4) based pagination module for Angular(2+) applications.\n\n## Examples\n\n* [demo-page](https://manishjanky.github.io/ngx-pagination-bootstrap-demo/)\n\n## Installation\n\n* `npm install ngx-pagination-bootstrap`\n* `npm install bootstrap@4.0.0 --save-dev`\n* include bootstrap scripts and styles in you `angular-cli.json` to be build of your build process.\n* or include bootstrap css in your index.html \n\n`````\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" integrity=\"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ\" crossorigin=\"anonymous\"\u003e\n`````\n* Right now `bootstrap@4.0.0-alpha.6` is supported till `v1.5.0`.\n* Bootstrap `v4.0.0` supported from `v1.6.0` onwards.\n\n### For webpack and tsc builds/ angular-cli builds\n\n* import `PaginationModule` from `ngx-pagination-bootstrap`:\n\n```\nimport { PaginationModule } from 'ngx-pagination-bootstrap'\n```\n\n* add `PaginationModule` to the imports of your NgModule:\n\n```\n@NgModule({\n  imports: [\n    ...,\n\n    PaginationModule\n  ],\n  ...\n})\nclass YourModule { ... }\n```\n\n* use `\u003cng-pagination\u003e\u003c/ng-pagination\u003e` in your templates to add pagination in your view like below\n\n```\n\u003cng-pagination [position]=\"'left'\" [pageSize]=\"10\" [itemsCount]=\"data.length\" [data]=\"data\" (getPageData)=\"getPageData($event)\"\u003e\u003c/ng-pagination\u003e\n```\n\n* do not forget to include bootstrap css in your build process, module or index.html!\n\n## Config\n\n### Input\n\n* `pageSize: number` - Size of a page i.e number of items to be displayed in one page.\n* `itemsCount: number` - total no of itmes that needs ro be paged/total no of records.\n* `position: string` - position of the pagination respect to parent contrainer of your pagination component.\n* `data: Array` - Optional | the data needs to be paged default is null. If pagination is handled by api no need of data.\n\n### Output\n\n* `getPageData: EventEmitter` - emmited when user navigates to a page. Caputure this and update you view data. The events contains the following info\n\n```\n{\n    event: event: Event,\n    pageNo: pageNo: number,\n    pageSize:pageSize: number,\n    data: null| Array,\n}\n```\n- **event**: the triggered event\n- **pageNo**: current page number\n- **pageSize**: current page size. No of items per page\n- **data**: data is the array of records that belongs to this page. Will be `null` if data was not passed and you can fetch data from your api or the way you want it to handle\n\n## Changelog\n* v1.4.1\n````\n Added support for Observable Data Source.\n Current items range display bug when itemcount 0 bug fix .\n````\n* v1.5.0\n````\nAngular 4.0.0 support added\nMinor bug fixes\n````\n* v1.6.0\n````\nBootstrap 4.0.0 supported\nRange of items hidden on small devices\n````\n## Help Improve\n\nFound a bug or an issue with this? [Open a new issue](https://github.com/manishjanky/ngx-pagination-bootstrap/issues) here on GitHub.\n\n## Contributing to this project\n\nAnyone and everyone is welcome to contribute. Please take a moment to\nreview the [guidelines for contributing](CONTRIBUTING.md).\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanishjanky%2Fngx-pagination-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanishjanky%2Fngx-pagination-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanishjanky%2Fngx-pagination-bootstrap/lists"}