The infinite scroll library for AngularJS

NgxMugenScroll

This library was generated with Angular CLI version 11.0.9.

• API references
• live demo1

Set up

You need to import NgxMugenScrollModule.

import { NgxMugenScrollModule } from 'ngx-mugen-scroll';
...
@NgModule({
  imports: [
      ...
    NgxMugenScrollModule,
      ...
  ],

Usage

Overview

Component

This library provides NgxMugenScrollComponent that implements infinite scroll.

NgxMugenScrollComponent has provider that provides datas displayed on the component during scrolling.

provider is suitable for DataProvider interface.

Scroll position is saved automatically in memory. Saved position can be loaded when stream is redisplayed.

<lib-ngx-mugen-scroll [provider]='provider'>
	  <div libMugenScrollTop></div>
	  <div *libMugenScrollData='let data = data'>
		    <div>{{data.index}}</div>
		    <div>{{data.message}}</div>
	  </div>
	  <div libMugenScrollBottom></div>
</lib-ngx-mugen-scroll>

NgxMugenScrollComponent must have three children.

• Top component
  • The component with libMugenScrollTop attribute represents top of the NgxMugenScrollComponent.
• Bottom component
  • The component with libMugenScrollBottom attribute represents bottom of the NgxMugenScrollComponent.
• Data component
  • The component with libMugenScrollData attribute represents row of the stream in NgxMugenScrollComponent.
  • Local variable data is provided by provider specified in lib-ngx-mugen-scroll tag.

If autoFetchingBottom(autoFetchingTop) is set to true and top component is visible, then next data is provided by provider and appended to the bottom(top) of stream.

Provider

The class implementing Provider interface provides data on the stream.

TBD

Scroll position store feature

TBD

API

• reference docs

Example

Simple infinite scroll

In left stream, data is fetched automatically when stream is located to bottom(top).

In Right stream, data is not fetched automatically when stream is located to bottom(top). When use click Read more ... button, the data is fetched.

live demo1

Save scroll position

live demo2