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
|
7 | Inspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular (> 2).
|
8 |
|
9 | ## Angular Support
|
10 | Supports in Angular **> +2, 4**
|
11 |
|
12 | ## Angular Consulting Services
|
13 | I'm a Senior Javascript Engineer & A Front End Consultant at [Orizens](http://orizens.com).
|
14 | My 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 | ```
|
22 | npm install angular2-infinite-scroll --save
|
23 | ```
|
24 |
|
25 | ## Supported API
|
26 | Currently 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
|
38 | By 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
|
48 | First, import the InfiniteScrollModule to your module:
|
49 |
|
50 | ```typescript
|
51 | import { NgModule } from '@angular/core';
|
52 | import { BrowserModule } from '@angular/platform-browser';
|
53 | import { InfiniteScrollModule } from 'angular2-infinite-scroll';
|
54 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
55 | import { AppComponent } from './app';
|
56 |
|
57 | @NgModule({
|
58 | imports:[ BrowserModule, InfiniteScrollModule ],
|
59 | declarations: [ AppComponent, ],
|
60 | bootstrap: [ AppComponent ]
|
61 | })
|
62 | export class AppModule { }
|
63 |
|
64 | platformBrowserDynamic().bootstrapModule(AppModule);
|
65 | ```
|
66 |
|
67 | In this example, the **onScroll** callback will be invoked when the window is scrolled down:
|
68 |
|
69 | ```typescript
|
70 | import { 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 | })
|
83 | export class AppComponent {
|
84 | onScroll () {
|
85 | console.log('scrolled!!')
|
86 | }
|
87 | }
|
88 | ```
|
89 | in this example, whenever the "search-results" is scrolled, the callback will be invoked:
|
90 |
|
91 | ```typescript
|
92 | import { 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 | })
|
112 | export class AppComponent {
|
113 | onScroll () {
|
114 | console.log('scrolled!!')
|
115 | }
|
116 | }
|
117 | ```
|
118 |
|
119 | In 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
|
122 | import { Component } from '@angular/core';
|
123 | import { 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 | })
|
139 | export 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))
|