UNPKG

5.55 kBMarkdownView Raw
1[![Build Status](https://travis-ci.org/orizens/angular2-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/angular2-infinite-scroll)
2
3# DEPRECATED - Please Use The New NGX-Infinite-Scroll
4[ngx-infinite-scroll](http://github.com/orizens/ngx-infinite-scroll)
5
6# Angular Infinite Scroll
7Inspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular (> 2).
8
9## Angular Support
10Supports in Angular **> +2, 4**
11
12## Angular Consulting Services
13I'm a Senior Javascript Engineer & A Front End Consultant at [Orizens](http://orizens.com).
14My services include:
15- consulting to companies and startups on how to approach code in their projects and keep it maintainable.
16- I provide project bootstrapping and development - while afterwards, I integrate it on site and guide the team on it.
17
18[Contact Me Here](http://orizens.com/contact)
19
20## Installation
21```
22npm install angular2-infinite-scroll --save
23```
24
25## Supported API
26Currently supported attributes:
27* **infiniteScrollDistance**<_number_> - (optional, default: **2**) - should get a number, the number of viewport lenghts from the bottom of the page at which the event will be triggered.
28* **infiniteScrollUpDistance**<_number_> - (optional, default: **1.5**) - should get a number
29* **infiniteScrollThrottle**<_number_> - (optional, default: **300**) - should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user *stops* scrolling.
30* **infiniteScrollContainer**<_string|HTMLElement_> - (optional, default: null) - should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.
31* **scrolled**<_function_> - this will callback if the distance threshold has been reached on a scroll down.
32* **scrolledUp**<_function_> - (event: InfiniteScrollEvent) - this will callback if the distance threshold has been reached on a scroll up.
33* **scrollWindow**<_boolean_> - (optional, default: **true**) - listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.
34* **immediateCheck**<_boolean_> - (optional, default: **false**) - invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled).
35* **infiniteScrollDisabled**<_boolean_> - (optional, default: **false**) - doesn't invoke the handler if set to true
36
37## Behavior
38By default, the directive listens to the **window scroll** event and invoked the callback.
39**To trigger the callback when the actual element is scrolled**, these settings should be configured:
40* [scrollWindow]="false"
41* set an explict css "height" value to the element
42
43## DEMO
44- [**Default Scroll** By Window - plunkr](https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview)
45- [Scroll On a **"Modal"** - plunkr](https://plnkr.co/edit/QnQOwE9SEapwJCCFII3L?p=preview)
46
47## Usage
48First, import the InfiniteScrollModule to your module:
49
50```typescript
51import { NgModule } from '@angular/core';
52import { BrowserModule } from '@angular/platform-browser';
53import { InfiniteScrollModule } from 'angular2-infinite-scroll';
54import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
55import { AppComponent } from './app';
56
57@NgModule({
58 imports:[ BrowserModule, InfiniteScrollModule ],
59 declarations: [ AppComponent, ],
60 bootstrap: [ AppComponent ]
61})
62export class AppModule { }
63
64platformBrowserDynamic().bootstrapModule(AppModule);
65```
66
67In this example, the **onScroll** callback will be invoked when the window is scrolled down:
68
69```typescript
70import { Component } from '@angular/core';
71
72@Component({
73 selector: 'app',
74 template: `
75 <div class="search-results"
76 infinite-scroll
77 [infiniteScrollDistance]="2"
78 [infiniteScrollThrottle]="300"
79 (scrolled)="onScroll()">
80 </div>
81 `
82})
83export class AppComponent {
84 onScroll () {
85 console.log('scrolled!!')
86 }
87}
88```
89in this example, whenever the "search-results" is scrolled, the callback will be invoked:
90
91```typescript
92import { Component } from '@angular/core';
93
94@Component({
95 selector: 'app',
96 styles: [
97 `.search-results {
98 height: 20rem;
99 overflow: scroll;
100 }`
101 ],
102 template: `
103 <div class="search-results"
104 infinite-scroll
105 [infiniteScrollDistance]="2"
106 [infiniteScrollThrottle]="500"
107 (scrolled)="onScroll()"
108 [scrollWindow]="false">
109 </div>
110 `
111})
112export class AppComponent {
113 onScroll () {
114 console.log('scrolled!!')
115 }
116}
117```
118
119In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
120
121```typescript
122import { Component } from '@angular/core';
123import { InfiniteScroll } from 'angular2-infinite-scroll';
124
125@Component({
126 selector: 'app',
127 directives: [ InfiniteScroll ],
128 template: `
129 <div class="search-results"
130 infinite-scroll
131 [infiniteScrollDistance]="2"
132 [infiniteScrollUpDistance]="1.5"
133 [infiniteScrollThrottle]="500"
134 (scrolled)="onScrollDown()"
135 (scrolledUp)="onScrollUp()">
136 </div>
137 `
138})
139export class AppComponent {
140 onScrollDown () {
141 console.log('scrolled down!!')
142 }
143
144 onScrollUp () {
145 console.log('scrolled up!!')
146 }
147}
148```
149
150# Showcase Examples
151* [Echoes Player Ng2 Version](http://orizens.github.io/echoes-ng2) ([github repo for echoes player](http://github.com/orizens/echoes-ng2))