ng-infinite-performance-scroll

High performance infinite scroll/pagination

Usage no npm install needed!

<script type="module">
  import ngInfinitePerformanceScroll from 'https://cdn.skypack.dev/ng-infinite-performance-scroll';
</script>

README

Infinite performance scroll component

Description:

Usage: --Intall npm install --save ng-infinite-performance-scroll -- Simple example

<infinite-performance-scroll [data]="items"> {{ item }}

Interface: Components: infinite-performance-scroll - Main component. Define item template inside, using let-* directive and ng-template component.

infinite-performance-scroll-bottom - directive,
  you can place all data that your want to show under scrollable list.
  For example - progress spinner for showing it while waiting next page loading.
  Changing height dynamicly may caught an errors.
  !Place it inside infinite-performance-scroll component only 

|Input name|Input type|Default value|Description| |-|-| |data|any[]|[]|Array of items that will iterate in scroll, can be changed async| |-|-| |scrollWindow|Boolean|true|Define scrolable element. True - scroll on window, False - scroll on component.| |-|-| |nextPageOffset|Number|300|Define a position of scroll to call next page action. Value in px from end.| |-|-| |loadNextPage|Action|null|Should call action on end of page was reached|

Note is just a simplified representation of logic that implemented for scrolled content.

|Scroll without model|Scroll with module| |-|-| |Alt Text|Alt Text|