{"id":20538572,"url":"https://github.com/slavede/ngx-paginate","last_synced_at":"2025-04-14T07:50:38.265Z","repository":{"id":26542381,"uuid":"109157122","full_name":"slavede/ngx-paginate","owner":"slavede","description":"Angular standalone pagination for your data","archived":false,"fork":false,"pushed_at":"2023-02-02T03:01:52.000Z","size":2767,"stargazers_count":6,"open_issues_count":11,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T21:23:26.142Z","etag":null,"topics":["angular","angular-component","ngx","pagination","simple","typescript"],"latest_commit_sha":null,"homepage":"","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/slavede.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-01T16:45:00.000Z","updated_at":"2024-04-12T21:55:55.000Z","dependencies_parsed_at":"2023-02-17T13:45:47.016Z","dependency_job_id":null,"html_url":"https://github.com/slavede/ngx-paginate","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavede%2Fngx-paginate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavede%2Fngx-paginate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavede%2Fngx-paginate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavede%2Fngx-paginate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slavede","download_url":"https://codeload.github.com/slavede/ngx-paginate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844046,"owners_count":21170486,"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-component","ngx","pagination","simple","typescript"],"created_at":"2024-11-16T00:47:04.054Z","updated_at":"2025-04-14T07:50:38.235Z","avatar_url":"https://github.com/slavede.png","language":"TypeScript","readme":"[![Build Status](https://travis-ci.org/slavede/ngx-paginate.svg?branch=master)](https://travis-ci.org/slavede/ngx-paginate)\n\n# NgxPaginate\n\nAngular pagination component for your grid (or any other form of data). It's just concerned of remembering current page state.\n\nIt calculates how many pages it needs/can display for user to select from based on current page, page size and total items.\n\n![demo1](https://user-images.githubusercontent.com/2838038/33149056-7e92abd4-cfce-11e7-9c2e-313c122bc612.gif)\n\n## Usage\n\n```bash\nnpm install ngx-paginate --save\n```\n\nImport module\n\n```ts\nimport { NgxPaginateModule } from 'ngx-paginate';\n\n@NgModule({\n  imports: [\n    NgxPaginateModule\n  ]\n})\n```\n\nUse in your component:\n\n```html\n\u003cngx-paginate\n  [page]=\"page\"\n  [options]=\"options\"\n  (pageChange)='setPage($event)'\n  (pageSizeChange)='setPage($event)'\u003e\n\u003c/ngx-paginate\u003e\n```\nWhere page is of type PageState (comes with component as well):\n\n```ts\nexport class PageState {\n  currentPage: number;\n  pageSize: number;\n  totalItems?: number;\n  numberOfPages?: number;\n}\n```\n\n\nOptions are type of PaginateOptions (comes with component as well):\n\n```ts\nexport class PaginateOptions {\n  // number of how many pages additionally will be shown on left and right\n  spanPages: number;\n  // show or hide button for first page (default is true)\n  firstPage: boolean;\n  // show or hide button for previous page (default is true)\n  previousPage: boolean;\n  // show or hide button for next page (default is true)\n  nextPage: boolean;\n  // show or hide button for last page (default is true)\n  lastPage: boolean;\n  // string that will be shown in appropriate boxes (defaults to \u003c\u003c, \u003e\u003e, \u003c and \u003e)\n  titles: {\n    firstPage: string;\n    lastPage: string;\n    previousPage: string;\n    nextPage: string;\n  };\n  // which values to allow to change page for\n  pageSizes: [{\n    value: 5,\n    display: '5'\n  }, {\n    value: 10,\n    display: '10'\n  }, {\n    value: 15,\n    display: '15'\n  }]\n}\n```\n\nDefault options are:\n```TS\nconst defaults: PaginateOptions = {\n  spanPages : 2,\n  previousPage: true,\n  nextPage: true,\n  firstPage: true,\n  lastPage: true,\n  titles: {\n    firstPage: 'First',\n    previousPage: 'Previous',\n    lastPage: 'Last',\n    nextPage: 'Next',\n    pageSize: 'Items per page'\n  },\n  pageSizes: [{\n    value: 5,\n    display: '5'\n  }, {\n    value: 10,\n    display: '10'\n  }, {\n    value: 15,\n    display: '15'\n  }]\n};\n```\n\nAnd pageChange is triggered each time page is changed via component:\n\n```ts\npageChange(pageState: PageState) {\n  console.log('Page changed. Reload data with new paging values');\n  // do whatever you need here\n}\n```\n\n## Customize colors\n\nTo modify how each page entry would look like you need to provide some css overrides in your component (::ng-deep)\n\n`.page-entry` - each page number entry\n\nand\n\n`.page-entry.active` - active page entry\n\nFor example\n\n```scss\nngx-paginate ::ng-deep .page-entry {\n  background-color: black;\n  color: yellow;\n}\nngx-paginate ::ng-deep .page-entry.active {\n  background-color: blue;\n  color: red;\n}\n```\n\n# Changelog\n\n# Changelog\n\n## [2.0.1] - 2019-08-13\n\n**BREAKING CHANGES:**\n\n* not triggering pageChange on init (kind of bugfix)\n\n## [2.0.0] - 2019-08-13\n\n**BREAKING CHANGES:**\n* (pageChange) not emitted when changing page size. New event emitter added called pageSizeChange\n\n\n## [1.1.0] - 2019-04-04\n\nImproved build system.\n\n**BREAKING CHANGES:**\n\nImporting should be done differently. Instead of using:\n\n```TS\nimport { NgxPaginateModule } from 'ngx-paginate/ngx-paginate';\n```\nuse\n```TS\nimport { NgxPaginateModule } from 'ngx-paginate';\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavede%2Fngx-paginate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslavede%2Fngx-paginate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavede%2Fngx-paginate/lists"}