@robingenz/ngx-infinite-scroll

Angular directive for infinite scrolling.

Usage no npm install needed!

<script type="module">
  import robingenzNgxInfiniteScroll from 'https://cdn.skypack.dev/@robingenz/ngx-infinite-scroll';
</script>

README

ngx-infinite-scroll

npm (version) npm (downloads)

📜 Angular directive for infinite scrolling.

Installation

npm install @robingenz/ngx-infinite-scroll

Import the InfiniteScrollModule:

import { InfiniteScrollModule } from '@robingenz/ngx-infinite-scroll';

@NgModule({
  imports: [InfiniteScrollModule],
})
export class AppModule {}

Usage

<div
  infiniteScroll
  infiniteScrollThreshold="150px"
  [infiniteScrollDisabled]="false"
  (onInfiniteScroll)="loadMoreItems()"
>
  <div *ngFor="let item of items">{{ item }}</div>
</div>

API

Properties

Name Type Required Default Details
infiniteScrollThreshold string ✕ 200px The threshold distance from the bottom of the element to call the onInfiniteScroll output event when scrolled.The value can be either a percent, or in pixels.
infiniteScrollDisabled boolean ✕ false If true, the infinite scroll event listeners will be removed.

Events

Name Type Details
onInfiniteScroll void Emitted when the scroll reaches the threshold distance.

Example

A working example can be found here.

Changelog

See CHANGELOG.md.

License

See LICENSE.