sisisin/ng-infinite-scroll

Simple infinit scroll component for Angular(version 2 or more).

Usage

First, install package.

$ npm install -S @sisisin/ng-infinite-scroll

And import into your NgModule.

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

@NgModule({
  imports: [InfiniteScrollModule],
})
export class AppModule { }

Last, using your component.

@Component({
  selector: 'my-app',
  template: `
<div style="height: 300px; width: 300px;">
  <infinite-scroll [onAdd]="onAdd" [loadHeight]="40">
    <div items *ngFor="let num of nums">{{num}}</div>
    <div loading>now loading...</div>
  </infinite-scroll>
</div>`,
})
export class AppComponent {
  onAdd = () => {
    // on add action.
    // you can return Promise | Observable
  }
}

Example

$ cd example/
$ npm install # NOTE: Don't use yarnpkg. see issue: https://github.com/yarnpkg/yarn/issues/685
$ npm run build && npm run serve

License

MIT

ng-infinite-scroll's Issues

property bindingを使ってfunctionを渡しているのはなぜ？

突然失礼します、angularの勉強のためにコードを読ませて頂いております。
コードを読んで疑問に思ったところがあり、もし教えて頂けるようであればご回答ください。

<infinite-scroll [onAdd]="onAdd" [loadHeight]="40">

この [onAdd]="onAdd" の部分なのですが、event bindingではなく property bindingを採用されているのは理由があるのでしょうか？