{"id":26417347,"url":"https://github.com/lukonik/ng-inf-scroll","last_synced_at":"2026-01-27T07:35:28.649Z","repository":{"id":264450943,"uuid":"893414216","full_name":"lukonik/ng-inf-scroll","owner":"lukonik","description":"ng-inf-scroll is a lightweight library for adding infinite scrolling to Angular apps","archived":false,"fork":false,"pushed_at":"2024-11-25T09:10:07.000Z","size":160,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-17T20:51:04.773Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukonik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-11-24T11:45:00.000Z","updated_at":"2025-07-24T14:37:50.000Z","dependencies_parsed_at":"2024-11-24T12:28:14.983Z","dependency_job_id":"3003ccc2-823e-47a3-8882-ed1558d5bb77","html_url":"https://github.com/lukonik/ng-inf-scroll","commit_stats":null,"previous_names":["lukonik/ng-inf-scroll"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lukonik/ng-inf-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fng-inf-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fng-inf-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fng-inf-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fng-inf-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukonik","download_url":"https://codeload.github.com/lukonik/ng-inf-scroll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukonik%2Fng-inf-scroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28808105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:14:39.408Z","status":"ssl_error","status_checked_at":"2026-01-27T07:14:39.098Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-03-18T01:01:50.977Z","updated_at":"2026-01-27T07:35:28.633Z","avatar_url":"https://github.com/lukonik.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Adding Infinite Scroll in Angular with ng-inf-scroll\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" alt=\"ng-inf-scroll logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n`ng-inf-scroll` is a lightweight, extremely performant 🚀 Angular library designed to seamlessly implement infinite scroll functionality in your Angular applications. In this blog post, I'll walk you through how to integrate infinite scrolling into your Angular applications using `ng-inf-scroll`.\n\n## What is ng-inf-scroll?\n\n`ng-inf-scroll` is a lightweight, extremely performant Angular library designed to seamlessly add infinite scroll functionality to your Angular applications. With easy-to-use services and directives, you can use `ng-inf-scroll` on both the window (root element) and any container element within your application.\n\n### Installation\n\nTo get started, install `ng-inf-scroll` using npm:\n\n```sh\nnpm install ng-inf-scroll\n```\n\n### Usage\n\nThere are two main ways to use the `ng-inf-scroll` library:\n\n1. Infinite Scroll on the window (root element)\n2. Infinite Scroll on a container element\n\nLet's dive into both approaches.\n\n### 1. Infinite Scroll on the Window (Root Element)\n\nIf you want infinite scroll to work on the entire window, inject the `ViewportInfScroll` service into your component and listen to the `scrolled` observable.\n\n```typescript\nimport { Component, OnInit, OnDestroy, inject } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ViewportInfScroll } from 'ng-inf-scroll';\n\n@Component({\n  selector: 'some-page',\n  template: ' \u003cp\u003e Page content \u003c/p\u003e ',\n})\nexport class SomePageComponent implements OnInit, OnDestroy {\n  viewportInfScroll = inject(ViewportInfScroll);\n  sub: Subscription;\n\n  ngOnInit() {\n    this.sub = this.viewportInfScroll.scrolled().subscribe(() =\u003e {\n      this.loadMore();\n    });\n  }\n\n  loadMore() {\n    // Load data\n  }\n\n  ngOnDestroy() {\n    this.sub.unsubscribe();\n  }\n}\n```\n\nDon't forget to unsubscribe from the observable in the `ngOnDestroy` callback to clean up the listener.\n\n### 2. Infinite Scroll on a Container Element\n\nIf you have a specific container element where you want to add infinite scroll, you can use the `infScroll` directive. This is useful when scrolling should be limited to a particular section of the page.\n\nHere's an example:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { InfScroll } from 'ng-inf-scroll';\n\n@Component({\n  selector: 'some-page',\n  styles: [\n    `\n      .container {\n        height: 200px;\n        overflow-y: auto;\n      }\n    `,\n  ],\n  template: `\n    \u003cdiv class=\"container\" infScroll (scrolled)=\"loadMore()\"\u003e\n      \u003ch1 *ngFor=\"let item of data; trackBy: trackByFn\"\u003e{{ item }}\u003c/h1\u003e\n    \u003c/div\u003e\n  `,\n  standalone: true,\n  imports: [InfScroll],\n})\nexport class SomePageComponent {\n  data = new Array(100).fill(0).map(() =\u003e Math.random());\n\n  loadMore() {\n    // Load more data logic here\n  }\n\n  trackByFn(index: number) {\n    return index;\n  }\n}\n```\n\n### Options\n\n`ng-inf-scroll` comes with configurable options that help customize the infinite scroll behavior. Here are the available properties:\n\n- **orientation**: (`'x' | 'y'`) - The default is `'y'`, which means vertical scrolling. Use `'x'` for horizontal scrolling.\n- **autoStop**: (`boolean`) - Default is `true`. If set to `true`, the `scrolled` event will not emit if the container's height remains unchanged after the last emission. For instance, if the scrolled event is triggered, and you fetch data from the server but the response is empty, the container's height will stay the same. This indicates that you've reached the end of the infinite scroll.\n- **offsetPercentage**: (`number`) - Default is `20`. It defines when the `scrolled` event should be emitted, based on the percentage of the container's scroll height. For example, initially, your container's scroll height might be 300px. As you load more data through infinite scrolling, the scroll height increases to 1000px. This setting ensures the scrolled event is emitted consistently at the same relative scroll position, regardless of the container's changing height.\n\n### Override Default Options\n\nTo override the default options globally, you can use the `provideInfScroller` function in the `appConfig`.\n\n```typescript\nimport { ApplicationConfig } from '@angular/core';\nimport { provideInfScroller } from 'ng-inf-scroll';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideInfScroller({\n      autoStop: false,\n      offsetPercentage: 30,\n    }),\n  ],\n};\n```\n\nThis allows you to modify how the infinite scroll behaves globally, ensuring it meets your application's specific requirements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukonik%2Fng-inf-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukonik%2Fng-inf-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukonik%2Fng-inf-scroll/lists"}