🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

ngx-scroll

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-scroll

angular scroll with rxjs

1.0.3
latest
Source
npm
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

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()TypeRequiredDefaultDescription
canScrollbooleanrequiredOne of the conditions for deciding whether to roll;The recommended usage is: offset < count
scrollPercentagenumberoptional80Limit percentage to scroll

Events

@Output()TypeEvent TypeDescription
scrolledEventEmitterbooleanThis 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);
    }
  }
}

Keywords

angular-scroll

FAQs

Package last updated on 23 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts