https://github.com/lukonik/ng-inf-scroll
ng-inf-scroll is a lightweight library for adding infinite scrolling to Angular apps
https://github.com/lukonik/ng-inf-scroll
Last synced: 16 days ago
JSON representation
ng-inf-scroll is a lightweight library for adding infinite scrolling to Angular apps
- Host: GitHub
- URL: https://github.com/lukonik/ng-inf-scroll
- Owner: lukonik
- Created: 2024-11-24T11:45:00.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-25T09:10:07.000Z (5 months ago)
- Last Synced: 2025-04-13T04:44:31.137Z (16 days ago)
- Language: TypeScript
- Size: 156 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ng-inf-scroll - A lightweight library for adding infinite scrolling to Angular apps. (Table of contents / Third Party Components)
- awesome-angular - ng-inf-scroll - A lightweight library for adding infinite scrolling to Angular apps. (Table of contents / Third Party Components)
README
# Adding Infinite Scroll in Angular with ng-inf-scroll
`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`.
## What is ng-inf-scroll?
`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.
### Installation
To get started, install `ng-inf-scroll` using npm:
```sh
npm install ng-inf-scroll
```
### Usage
There are two main ways to use the `ng-inf-scroll` library:
1. Infinite Scroll on the window (root element)
2. Infinite Scroll on a container element
Let's dive into both approaches.
### 1. Infinite Scroll on the Window (Root Element)
If you want infinite scroll to work on the entire window, inject the `ViewportInfScroll` service into your component and listen to the `scrolled` observable.
```typescript
import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { Subscription } from 'rxjs';
import { ViewportInfScroll } from 'ng-inf-scroll';
@Component({
selector: 'some-page',
template: '
Page content
',
})
export class SomePageComponent implements OnInit, OnDestroy {
viewportInfScroll = inject(ViewportInfScroll);
sub: Subscription;
ngOnInit() {
this.sub = this.viewportInfScroll.scrolled().subscribe(() => {
this.loadMore();
});
}
loadMore() {
// Load data
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
```
Don't forget to unsubscribe from the observable in the `ngOnDestroy` callback to clean up the listener.
### 2. Infinite Scroll on a Container Element
If 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.
Here's an example:
```typescript
import { Component } from '@angular/core';
import { InfScroll } from 'ng-inf-scroll';
@Component({
selector: 'some-page',
styles: [
`
.container {
height: 200px;
overflow-y: auto;
}
`,
],
template: `
{{ item }}
`,
standalone: true,
imports: [InfScroll],
})
export class SomePageComponent {
data = new Array(100).fill(0).map(() => Math.random());
loadMore() {
// Load more data logic here
}
trackByFn(index: number) {
return index;
}
}
```
### Options
`ng-inf-scroll` comes with configurable options that help customize the infinite scroll behavior. Here are the available properties:
- **orientation**: (`'x' | 'y'`) - The default is `'y'`, which means vertical scrolling. Use `'x'` for horizontal scrolling.
- **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.
- **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.
### Override Default Options
To override the default options globally, you can use the `provideInfScroller` function in the `appConfig`.
```typescript
import { ApplicationConfig } from '@angular/core';
import { provideInfScroller } from 'ng-inf-scroll';
export const appConfig: ApplicationConfig = {
providers: [
provideInfScroller({
autoStop: false,
offsetPercentage: 30,
}),
],
};
```
This allows you to modify how the infinite scroll behaves globally, ensuring it meets your application's specific requirements.