{ "_from": "ngx-pagination", "_id": "ngx-pagination@3.1.0", "_inBundle": false, "_integrity": "sha512-D/8Is3z0nipHCCQN0XZyh5/nhSrON/ybft3Wk8dfPHMGtjqzoOSorNaanypO35JD/jECcam/cS/evjlaqDAgQg==", "_location": "/ngx-pagination", "_phantomChildren": {}, "_requested": { "escapedName": "ngx-pagination", "fetchSpec": "latest", "name": "ngx-pagination", "raw": "ngx-pagination", "rawSpec": "", "registry": true, "saveSpec": null, "type": "tag" }, "_requiredBy": [ "#USER", "/" ], "_resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.1.0.tgz", "_shasum": "66018bca39158215d66211b2b2cf368848b7d9d8", "_spec": "ngx-pagination", "_where": "/home/tis/projects/Petro", "author": { "email": "michael@michaelbromley.co.uk", "name": "Michael Bromley" }, "bugs": { "url": "https://github.com/michaelbromley/ngx-pagination/issues" }, "bundleDependencies": false, "dependencies": {}, "deprecated": false, "description": "Pagination for Angular", "devDependencies": { "@angular/common": "4.0.2", "@angular/compiler": "4.0.2", "@angular/compiler-cli": "4.0.2", "@angular/core": "4.0.2", "@angular/platform-browser": "4.0.2", "@angular/platform-browser-dynamic": "4.0.2", "@types/jasmine": "2.5.41", "@types/node": "^6.0.45", "jasmine-core": "^2.4.1", "json-loader": "^0.5.4", "karma": "1.7.1", "karma-chrome-launcher": "2.0.0", "karma-jasmine": "1.1.0", "karma-mocha-reporter": "^2.2.0", "karma-phantomjs-launcher": "1.0.4", "karma-webpack": "^2.0.3", "marked": "^0.3.6", "phantomjs-prebuilt": "^2.1.7", "reflect-metadata": "0.1.10", "rollup": "^0.50.0", "rxjs": "^5.0.3", "ts-loader": "^3.0.5", "typescript": "2.4.2", "webpack": "3.8.1", "zone.js": "^0.8.5" }, "files": [ "dist" ], "homepage": "https://github.com/michaelbromley/ngx-pagination#readme", "keywords": [ "angular", "angular2", "pagination" ], "license": "MIT", "main": "dist/ngx-pagination.umd.js", "module": "dist/ngx-pagination.js", "name": "ngx-pagination", "optionalDependencies": {}, "peerDependencies": { "@angular/common": ">=2.3.1", "@angular/core": ">=2.3.1" }, "readme": "# Pagination for Angular (v2+)[![Build Status](https://travis-ci.org/michaelbromley/ngx-pagination.svg?branch=master)](https://travis-ci.org/michaelbromley/ngx-pagination)\r\n\r\nThe simplest solution for pagination in Angular.\r\n\r\n## Table of Contents\r\n\r\n* [Demo](#demo)\r\n* [Quick Start](#quick-start)\r\n + [Angular Version](#angular-version)\r\n + [Module Format](#module-format)\r\n* [Simple Example](#simple-example)\r\n* [API](#api)\r\n + [PaginatePipe](#paginatepipe)\r\n + [PaginationControlsComponent](#paginationcontrolscomponent)\r\n + [PaginationControlsDirective](#paginationcontrolsdirective)\r\n* [Styling](#styling)\r\n* [Server-Side Paging](#server-side-paging)\r\n* [Multiple Instances](#multiple-instances)\r\n* [FAQ](#faq)\r\n + [Why does my filter not work with pagination?](#why-does-my-filter-not-work-with-pagination)\r\n* [Building from source](#building-from-source)\r\n* [Building the docs](#building-the-docs)\r\n* [License](#license)\r\n\r\n\r\n## Demo\r\n\r\nCheck out the live demo here: http://michaelbromley.github.io/ngx-pagination/\r\n\r\nPlay with it on StackBlitz here: https://stackblitz.com/edit/angular-e1f9hq\r\n\r\n## Quick Start\r\n\r\n```\r\nnpm install ngx-pagination --save\r\n```\r\n\r\n### Angular Version\r\n\r\nThis library is built to work with **Angular 2.3.0+**, and support ahead-of-time compilation.\r\nIf you need to support an earlier or pre-release version of Angular for now, please see the changelog for advice on which version to use.\r\n\r\n### Module Format\r\n\r\nThis library ships as a \"flat ES module\" (FESM). This means that all the JavaScript code is located in a single ES5-compatible file, but makes use of ES2015 `import` and `export` statements.\r\n\r\nWebpack, Systemjs and Rollup all support this format and should work without problems.\r\n\r\nA UMD bundle is also provided for systems which do not support FESM.\r\n\r\n## Simple Example\r\n\r\n```TypeScript\r\n// app.module.ts\r\nimport {NgModule} from '@angular/core';\r\nimport {BrowserModule} from '@angular/platform-browser';\r\nimport {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module\r\nimport {MyComponent} from './my.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module\r\n declarations: [MyComponent],\r\n bootstrap: [MyComponent]\r\n})\r\nexport class MyAppModule {}\r\n```\r\n\r\n```TypeScript\r\n// my.component.ts\r\nimport {Component} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'my-component',\r\n template: `\r\n \r\n \r\n \r\n `\r\n})\r\nexport class MyComponent {\r\n p: number = 1;\r\n collection: any[] = someArrayOfThings; \r\n}\r\n```\r\n\r\n## API\r\n\r\n### PaginatePipe\r\n\r\nThe PaginatePipe should be placed at the end of an NgFor expression. It accepts a single argument, an object conforming \r\nto the [`PaginationInstance` interface](/src/pagination-instance.ts). The following config options are available:\r\n\r\n```HTML\r\n...\r\n\r\n```\r\n\r\n* **`itemsPerPage`** [`number`] - **required** The number of items to display on each page.\r\n* **`currentPage`** [`number`] - **required** The current (active) page number.\r\n* **`id`** [`string`] If you need to support more than one instance of pagination at a time, set the `id` and ensure it\r\nmatches the id attribute of the `PaginationControlsComponent` / `PaginationControlsDirective` (see below).\r\n* **`totalItems`** [`number`] The total number of items in the collection. Only useful when doing server-side paging, \r\nwhere the collection size is limited to a single page returned by the server API. For in-memory paging, \r\nthis property should not be set, as it will be automatically set to the value of `collection.length`.\r\n\r\n### PaginationControlsComponent\r\n\r\nThis a default component for displaying pagination controls. It is implemented on top of the `PaginationControlsDirective`, and has a pre-set\r\ntemplate and styles based on the [Foundation 6 pagination component](http://foundation.zurb.com/sites/docs/pagination.html). If you require a more \r\ncustomised set of controls, you will need to use the `PaginationControlsDirective` and implement your own component.\r\n\r\n```HTML\r\n\r\n\r\n```\r\n\r\n* **`id`** [`string`] If you need to support more than one instance of pagination at a time, set the `id` and ensure it\r\nmatches the id set in the PaginatePipe config.\r\n* **`pageChange`** [`event handler`] The expression specified will be invoked whenever the page changes via a click on one of the\r\npagination controls. The `$event` argument will be the number of the new page. This should be used to update the value of\r\nthe `currentPage` variable which was passed to the `PaginatePipe`.\r\n* **`maxSize`** [`number`] Defines the maximum number of page links to display. Default is `7`.\r\n* **`directionLinks`** [`boolean`] If set to `false`, the \"previous\" and \"next\" links will not be displayed. Default is `true`.\r\n* **`autoHide`** [`boolean`] If set to `true`, the pagination controls will not be displayed when all items in the\r\ncollection fit onto the first page. Default is `false`.\r\n* **`previousLabel`** [`string`] The label displayed on the \"previous\" link.\r\n* **`nextLabel`** [`string`] The label displayed on the \"next\" link.\r\n* **`screenReaderPaginationLabel`** [`string`] The word for \"Pagination\" used to label the controls for screen readers.\r\n* **`screenReaderPageLabel`** [`string`] The word for \"page\" used in certain strings generated for screen readers, e.g. \"Next page\".\r\n* **`screenReaderCurrentLabel`** [`string`] The phrase indicating the current page for screen readers, e.g. \"You're on page \".\r\n\r\n### PaginationControlsDirective\r\n\r\nThe `PaginationControlsDirective` is used to build components for controlling your pagination instances. The directive selector is `pagination-template`, either as an element or an attribute. \r\nIt exports an API named \"paginationApi\", which can then be used to build the controls component.\r\n\r\nIt has the following inputs and outputs:\r\n\r\n```TypeScript\r\n@Input() id: string;\r\n@Input() maxSize: number;\r\n@Output() pageChange: EventEmitter;\r\n```\r\n\r\nHere is an example of how it would be used to build a custom component:\r\n\r\n```HTML\r\n\r\n\r\n
\r\n < \r\n
\r\n\r\n
\r\n \r\n {{ page.label }}\r\n \r\n
\r\n {{ page.label }}\r\n
\r\n
\r\n\r\n
\r\n > \r\n
\r\n \r\n\r\n```\r\n\r\nThe key thing to note here is `#p=\"paginationApi\"` - this provides a local variable, `p` (name it however you like), which can be used in the \r\ntemplate to access the directive's API methods and properties, which are explained below:\r\n\r\n* **`pages`** [`{ label: string, value: any }[]`] Array of page objects containing the page number and label.\r\n* **`maxSize`** [`number`] Corresponds to the value of `maxSize` which is passed to the directive.\r\n* **`getCurrent()`** [`() => number`] Returns the current page number.\r\n* **`setCurrent(val)`** [`(val: number) => void`] Triggers the `pageChange` event with the page number passed as `val`.\r\n* **`previous()`** [`() => void`] Sets current page to previous, triggering the `pageChange` event.\r\n* **`next()`** [`() => void`] Sets current page to next, triggering the `pageChange` event.\r\n* **`isFirstPage()`** [`() => boolean`] Returns true if the current page is the first page.\r\n* **`isLastPage()`** [`() => boolean`] Returns true if the current page is the last page\r\n* **`getLastPage()`** [`() => number`] Returns the page number of the last page.\r\n\r\nFor a real-world implementation of a custom component, take a look at [the source for the PaginationControlsComponent](/src/pagination-controls.component.ts).\r\n\r\n## Styling\r\n\r\nThe `PaginationControlsComponent` can be styled by simply overriding the default styles. To overcome Angular's view encapsulation, you may need to use the `/deep/` operator to target it (depending on the type of encapsulation your component is using).\r\n\r\nTo avoid specificity issues, just add your own custom class name to the element, which will allow your styles to override the defaults:\r\n\r\n```HTML\r\n// head\r\n\r\n\r\n// body\r\n\r\n```\r\n\r\n## Server-Side Paging\r\n\r\nIn many cases - for example when working with very large data-sets - we do not want to work with the full collection \r\nin memory, and use some kind of server-side paging, where the server sends just a single page at a time.\r\n\r\nThis scenario is supported by ngx-pagination by using the `totalItems` config option. \r\n\r\nGiven a server response json object like this:\r\n\r\n```\r\n{\r\n \"count\": 14453,\r\n \"data\": [\r\n { /* item 1 */ },\r\n { /* item 2 */ },\r\n { /* item 3 */ },\r\n { /* ... */ },\r\n { /* item 10 */ }\r\n ]\r\n}\r\n```\r\n\r\nwe should pass the value of `count` to the `PaginatePipe` as the `totalItems` argument:\r\n\r\n```HTML\r\n
  • ...
    • \r\n```\r\n\r\nThis will allow the correct number of page links to be calculated. To see a complete example of this (including\r\nusing the `async` pipe), see the [demo](http://michaelbromley.github.io/ngx-pagination/).\r\n\r\n## Multiple Instances\r\n\r\nIt is possible to have any number of pagination pipe/controls pairs in the same template. To do this, just make use of the \"id\" attribute:\r\n\r\n```HTML\r\n
      \r\n
    • ...
      • \r\n
    \r\n\r\n\r\n
      \r\n
    • ...
      • \r\n
    \r\n\r\n```\r\n\r\nYou can even have dynamically-generated instances, e.g. within an `ngFor` block:\r\n\r\n```TypeScript\r\nexport class MyComponent {\r\n p: number[] = [];\r\n}\r\n```\r\n\r\n```HTML\r\n
    \r\n
      \r\n
    • {{ item }}
      • \r\n
    \r\n \r\n
    \r\n```\r\n\r\n## FAQ\r\n\r\n### Why does my filter not work with pagination?\r\n\r\nA common issue is that people have trouble combining some kind of filter pipe with the paginate pipe. The typical symptom is that only the contents of the current page are filtered. The reason is that **the paginate pipe must come after the filter pipe**:\r\n\r\n```HTML\r\n
      \r\n
    • WRONG
      • <-- This will not work as expected\r\n
    \r\n\r\n
      \r\n
    • CORRECT
      • \r\n
    \r\n```\r\n\r\n## Building from source\r\n\r\nRequires globally-installed node (tested with v5.x) & npm. \r\n\r\n```\r\nnpm install\r\nnpm run test\r\nnpm run build \r\n```\r\n`test` runs the Karma tests once. You can also use `test:watch` to keep tests running in watch mode.\r\n\r\n`npm run build` creates an intermediate `/build` folder, but the final output of the lib (which gets published to npm) is in the `/dist` folder.\r\n\r\n## Building the docs\r\n```\r\ncd docs\r\nnpm install\r\nnpm run docs:watch // dev mode\r\nnpm run docs:dist // production mode\r\n```\r\n\r\nWhen in dev mode, serve the `/docs` folder with an http server, and go to `http://localhost:/index-dev.html` in your browser.\r\n\r\n\r\n## License\r\n\r\nMIT\r\n", "readmeFilename": "README.md", "repository": { "type": "git", "url": "git+https://github.com/michaelbromley/ngx-pagination.git" }, "scripts": { "build": "npm run clean && npm run ngc && npm run rollup:fesm && npm run rollup:umd && npm run copy-metadata", "clean": "rm -rf build && rm -rf dist", "copy-metadata": "find build/* -not -name '*.js' -exec cp -t dist {} +", "ngc": "ngc -p config/tsconfig.build.json", "publish-lib": "npm run test && npm run build", "rollup:fesm": "rollup build/ngx-pagination.js -o dist/ngx-pagination.js -f es", "rollup:umd": "rollup build/ngx-pagination.js -o dist/ngx-pagination.umd.js --f umd --name ngxPagination", "test": "karma start config/karma.conf.js", "test:watch": "npm run test -- --auto-watch --no-single-run" }, "types": "dist/ngx-pagination.d.ts", "version": "3.1.0" }