Description

ngx-scroll is an Angular Directive based on Rxjs 6 and Angular 8

Dependencies

Rxjs

Installation

npm install ngx-scroll --save

Supported API

Properties

| @Input() | Type | Required | Default | Description | | ---------------- | ------- | -------- | ------- | ----------------------------------------------------------------------------------------------- | | canScroll | boolean | required | | One of the conditions for deciding whether to roll;The recommended usage is: offset < count | | scrollPercentage | number | optional | 80 | Limit percentage to scroll |

Events

| @Output() | Type | Event Type | Description | | --------- | ------------ | ---------- | -------------------------------------------- | | scrolled | EventEmitter | boolean | This will callback when trigger scroll event |

Usage

First, import the NgxScrollModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxScrollModule } from 'ngx-scroll';
import { AppComponent } from './app';

@NgModule({
  imports: [BrowserModule, NgxScrollModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

In this example, the onScrolled callback will be triggered when your conditions are valid and the window is scrolled:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul class="scroll" zkNgxScroll [canScroll]="offset < itemCount" (scrolled)="onScrolled()">
      <li *ngFor="let item of list">{{ item }}</li>
    </ul>
  `,
  styles: [
    `
      .scroll {
        max-height: 100px;
        overflow: scroll;
      }
    `
  ]
})
export class AppComponent {
  list: number[] = [1, 2, 3, 4, 5];
  offset: number = 5;
  itemCount: number = 100;

  onScrolled() {
    // scroll event;
    this.offset += 5;
    let index = this.offset;
    for (index; index < this.offset + 5; index++) {
      this.list.push(index);
    }
  }
}