{"_id":"@1artifactware/infinite-scroll","name":"@1artifactware/infinite-scroll","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@1artifactware/infinite-scroll","version":"1.0.0","peerDependencies":{"@angular/common":"^15.0.1","@angular/core":"^15.0.1"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/ngx-infinite-scroll.mjs","es2020":"fesm2020/ngx-infinite-scroll.mjs","esm2020":"esm2020/ngx-infinite-scroll.mjs","fesm2020":"fesm2020/ngx-infinite-scroll.mjs","fesm2015":"fesm2015/ngx-infinite-scroll.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/ngx-infinite-scroll.mjs","es2020":"./fesm2020/ngx-infinite-scroll.mjs","es2015":"./fesm2015/ngx-infinite-scroll.mjs","node":"./fesm2015/ngx-infinite-scroll.mjs","default":"./fesm2020/ngx-infinite-scroll.mjs"}},"sideEffects":false,"gitHead":"757a1c8712550d97f4cf5a205a9016ec5862aa1e","description":"[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponso","_id":"@1artifactware/infinite-scroll@1.0.0","_nodeVersion":"18.12.1","_npmVersion":"9.1.2","dist":{"integrity":"sha512-JJwVDifxo5wzEG1I4QsReqi3eew8ARb8nfOLG1J5NbPUmClPX42JFc8bsx1w5s710vDNq9aP0Mj0mbiGvfDpNg==","shasum":"a11c3927dd4e4efa328cbf18e181ca48a9c62a09","tarball":"https://registry.npmjs.org/@1artifactware/infinite-scroll/-/infinite-scroll-1.0.0.tgz","fileCount":32,"unpackedSize":209364,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfysTej4Bjcxmlfx09h9nNMv5DIx33QlDZ5gSJS12KhAIhAOzlB+35FcI0u/IWut++eDx80qkzFNAAWdU3rn6E7OBg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhqYLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHthAAkxgCSuLkSI/BFCWYLL5qli/eTXXDrp8atzn1Qas9IT7O8x1m\r\nXMM1R+9uSDTWmFXHdp8/Xgj3/Jx5ZxCN9JGsWANTwUT9gkk3Liq/KBaVFIJ6\r\nvwpv7DPaoDJBK2YoqeVXWGAk/tGa0bLzWsrbK3WVSpWgH6FlwsIDmwFQ/8pn\r\nt69yi2TKNJu/7PLjdUz2S8rQG1VTI9rz4zCjcUPET2k5+wZDbeMyuGGOySo2\r\nrhRdAVbFW1tJq/HujHy7Syl7X+W3I34EAkzCOsveJntoSTlUx+Awx+7oFCeL\r\nZ2tYn/9IGLFecvqzps5SouRXvj2M2muklZEYOJYrV1RfMPlSGz1OT0uOX77K\r\nkRW67kSLCoIEhW27MrgIZpHDwEvzcGbIv19b5sQgORw7Nt1UBmkeMxSOxMdk\r\noHXKT2lhno2wto7wXDi3MgKAxnUebsRztr9PI2fo+9WuiL0hsl1pC4/SXjNS\r\ndiS54+v1cf8+iI9+FoqlsBEWtKVo8kkDsPvBoIUuLuTdtPcPh05mGADS+VJM\r\nj+V39kIVr4/tsaAwDDmSyTuW62edXFkNeqmXdeCnz70Dlyibw/a2BfCQiaIG\r\nkaarOntEEdZEEGN2y/54eKl//TsRbhHTpETHYQtbLRGtEd8vsxnzRXIvIlQe\r\nTr915b7L3tD0EmuETGfJyyzBx3W2M/noG9U=\r\n=Xlzc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1artifactware","email":"adam@1artifactware.com"},"directories":{},"maintainers":[{"name":"1artifactware","email":"adam@1artifactware.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/infinite-scroll_1.0.0_1669768715512_0.25181199797966225"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-30T00:38:35.410Z","1.0.0":"2022-11-30T00:38:35.753Z","modified":"2022-11-30T00:38:35.895Z"},"maintainers":[{"name":"1artifactware","email":"adam@1artifactware.com"}],"description":"[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponso","readme":"[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ngx-infinite-scroll/sponsors/badge.svg)](#sponsors)\n[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)\n[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)\n[![npm downloads a month](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)\n[![npm downloads a week](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)\n\n## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)\n\n# Angular Infinite Scroll\n\nversions now follow Angular's version to easily reflect compatibility. \nMeaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`\n\n## Angular - Older Versions Support\n\nStarting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0` \nFor **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4` \nFor **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3` \nFor Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated\n\n## Used By\n\n- [Google](https://google.com)\n- [Apple](https://apple.com)\n- [Amazon](https://amazon.com)\n- [Microsoft](https://microsoft.com)\n- [Disney](https://disney.com)\n- [Sap](https://sap.com/)\n- [Cisco](https://cisco.com/)\n- [Yandex](https://yandex.com)\n- [Ancestry](https://www.ancestry.com/)\n\nand much more.\n\n> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_\n\n### Opt-Out Of Scarf\n\nScarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)\n\n## Front End Consulting Services\n\nI'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).\nMy services include:\n\n- Angular/React/Javascript Consulting\n- Front End Architecture Consulting\n- Project Code Review\n- Project Development\n\n[Contact Here](http://orizens.com/contact)\n\n\n \"Webpack\n\n\n## Installation\n\n```\nnpm install ngx-infinite-scroll --save\n```\n\n## Supported API\n\n### Properties\n\n| @Input() | Type | Required | Default | Description |\n| ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \\* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |\n| infiniteScrollUpDistance | number | optional | 1.5 | should get a number |\n| infiniteScrollThrottle | number | optional | 150 | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling. |\n| scrollWindow | boolean | optional | true | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. |\n| immediateCheck | boolean | optional | false | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled) |\n| infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |\n| horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |\n| alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |\n| infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |\n| fromRoot | boolean | optional | false | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. |\n\n### Events\n\n| @Output() | Type | Event Type | Required | Description |\n| ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |\n| scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |\n| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |\n\n## Behavior\n\nBy default, the directive listens to the **window scroll** event and invoked the callback. \n**To trigger the callback when the actual element is scrolled**, these settings should be configured:\n\n- [scrollWindow]=\"false\"\n- set an explict css \"height\" value to the element\n\n## DEMO\n\n[Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)\n\n## Usage\n\nFirst, import the InfiniteScrollModule to your module:\n\n```typescript\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { InfiniteScrollModule } from \"ngx-infinite-scroll\";\nimport { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\nimport { AppComponent } from \"./app\";\n\n@NgModule({\n imports: [BrowserModule, InfiniteScrollModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n```\n\nIn this example, the **onScroll** callback will be invoked when the window is scrolled down:\n\n```typescript\nimport { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app\",\n template: `\n \n `,\n})\nexport class AppComponent {\n onScroll() {\n console.log(\"scrolled!!\");\n }\n}\n```\n\nin this example, whenever the \"search-results\" is scrolled, the callback will be invoked:\n\n```typescript\nimport { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app\",\n styles: [\n `\n .search-results {\n height: 20rem;\n overflow: scroll;\n }\n `,\n ],\n template: `\n \n `,\n})\nexport class AppComponent {\n onScroll() {\n console.log(\"scrolled!!\");\n }\n}\n```\n\nIn this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { InfiniteScroll } from \"ngx-infinite-scroll\";\n\n@Component({\n selector: \"app\",\n directives: [InfiniteScroll],\n template: `\n \n `,\n})\nexport class AppComponent {\n onScrollDown() {\n console.log(\"scrolled down!!\");\n }\n\n onScrollUp() {\n console.log(\"scrolled up!!\");\n }\n}\n```\n\nIn this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]=\"true\"`) or just inside the **infiniteScroll** directive (`[fromRoot]=\"false\"`, default option).\n\n```typescript\nimport { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app\",\n styles: [\n `\n .main-panel {\n height: 100px;\n overflow-y: scroll;\n }\n `,\n ],\n template: `\n
\n
\n \n `,\n})\nexport class AppComponent {\n selector: string = \".main-panel\";\n\n onScroll() {\n console.log(\"scrolled!!\");\n }\n}\n```\n\nIt is also possible to use **infiniteScrollContainer** without additional variable by using single quotes inside double quotes:\n\n```\n[infiniteScrollContainer]=\"'.main-panel'\"\n```\n\n# Showcase Examples\n\n- [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]\n\n\n\n## Sponsors\n\n\n\n\n\n\n\n\n\n\n\n","readmeFilename":"README.md"}