{"id":13480870,"url":"https://github.com/orizens/ngx-infinite-scroll","last_synced_at":"2025-05-13T16:11:19.486Z","repository":{"id":37602688,"uuid":"51137166","full_name":"orizens/ngx-infinite-scroll","owner":"orizens","description":"Infinite Scroll Directive for Angular","archived":false,"fork":false,"pushed_at":"2024-11-26T13:49:37.000Z","size":2778,"stargazers_count":1252,"open_issues_count":11,"forks_count":227,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-23T20:58:19.688Z","etag":null,"topics":["angular","angular-directives","angular-library","directive","infinite-scroll","scroll","ui","utility"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-infinite-scroll","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/orizens.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-05T09:19:39.000Z","updated_at":"2025-04-18T12:59:22.000Z","dependencies_parsed_at":"2024-12-08T00:32:13.326Z","dependency_job_id":"f4520af9-e371-45e9-bc09-1316c1ae4d31","html_url":"https://github.com/orizens/ngx-infinite-scroll","commit_stats":{"total_commits":320,"total_committers":51,"mean_commits":"6.2745098039215685","dds":"0.27812499999999996","last_synced_commit":"75a407ab7c741f09c04586a793c28f36451308ab"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orizens%2Fngx-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orizens%2Fngx-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orizens%2Fngx-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orizens%2Fngx-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orizens","download_url":"https://codeload.github.com/orizens/ngx-infinite-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514767,"owners_count":21443208,"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-directives","angular-library","directive","infinite-scroll","scroll","ui","utility"],"created_at":"2024-07-31T17:00:46.090Z","updated_at":"2025-04-23T20:58:26.448Z","avatar_url":"https://github.com/orizens.png","language":"TypeScript","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 =\u003c5.5.2** - use version `ngx-infinite-scroll@0.8.3`  \nFor Angular version **\u003c= 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\u003e _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 \u0026 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\u003ca href=\"https://orizens.com\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png\" alt=\"Webpack and Angular\" width=\"20%\"/\u003e\n\u003c/a\u003e\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\nIn this example, the **onScroll** callback will be invoked when the window is scrolled down:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { InfiniteScrollDirective } from 'ngx-infinite-scroll';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cdiv\n      class=\"search-results\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    \u003e\u003c/div\u003e\n  `,\n  imports: [InfiniteScrollDirective]\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';\nimport { InfiniteScrollDirective } from 'ngx-infinite-scroll';\n\n@Component({\n  selector: 'app',\n  styles: [\n    `\n      .search-results {\n        height: 20rem;\n        overflow: scroll;\n      }\n    `,\n  ],\n  template: `\n    \u003cdiv\n      class=\"search-results\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [scrollWindow]=\"false\"\n    \u003e\u003c/div\u003e\n  `,\n  imports: [InfiniteScrollDirective]\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    \u003cdiv\n      class=\"search-results\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollUpDistance]=\"1.5\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScrollDown()\"\n      (scrolledUp)=\"onScrollUp()\"\n    \u003e\u003c/div\u003e\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';\nimport { InfiniteScrollDirective } from 'ngx-infinite-scroll';\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    \u003cdiv class=\"main-panel\"\u003e\n      \u003cdiv\n        infiniteScroll\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\"\n        [infiniteScrollContainer]=\"selector\"\n        [fromRoot]=\"true\"\n        (scrolled)=\"onScroll()\"\n      \u003e\u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  imports: [InfiniteScrollDirective]\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\u003ca href=\"graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]\n\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## Sponsors\n\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/ngx-infinite-scroll/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n","funding_links":["https://opencollective.com/ngx-infinite-scroll"],"categories":["Uncategorized","Table of contents","UI Components","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Third Party Components","Infinite Scroll","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forizens%2Fngx-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forizens%2Fngx-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forizens%2Fngx-infinite-scroll/lists"}