title: Angular 4: Infinite scroll not working
body: <p>I have tried using ngx-infinite-scroll (<a href="https://www.npmjs.com/package/angular2-infinite-scroll" rel="noreferrer">https://www.npmjs.com/package/angular2-infinite-scroll</a>) and also some other directives but none seem to work.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"dependencies": {
  "@angular/animations": "^4.0.2",
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/compiler-cli": "^4.0.2",
  "@angular/core": "^4.0.0",
  "@angular/forms": "^4.0.0",
  "@angular/http": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/platform-server": "^4.0.2",
  "@angular/router": "^4.0.0",
  "absurd": "^0.3.8",
  "angular2-masonry": "^0.4.0",
  "animate.css": "^3.5.2",
  "bootstrap": "^3.3.7",
  "core-js": "^2.4.1",
  "font-awesome": "^4.7.0",
  "jquery": "^3.2.1",
  "jquery-slimscroll": "^1.3.8",
  "metismenu": "^2.7.0",
  "ng2-bs3-modal": "^0.10.4",
  "ngx-infinite-scroll": "^0.5.1",
  "rxjs": "^5.1.0"
  }
  </code></pre>
  
  <p><strong>user.component.html</strong></p>
  
  <pre><code>&lt;div class="row" infiniteScroll [infiniteScrollDistance]="0" 
    [infiniteScrollThrottle]="300" (scrolled)="loadMore()"&gt;
     &lt;div class="col-md-3 col-sm-4" *ngFor="let user of userList"&gt;
       &lt;span&gt;{{user.name}} ({{user.email}})&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>user.module.ts</strong></p>
  
  <p>The import is done</p>
  
  <pre><code>import { InfiniteScrollModule } from 'ngx-infinite-scroll';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      InfiniteScrollModule
    ],
    declarations: [UserComponent],
    providers: [],
    exports: [],
  })
  export class UserModule { }
  </code></pre>
  
  <p><strong>user.component.ts</strong></p>
  
  <pre><code>export class UserComponent {
  
    constructor() {}
  
    loadMore() {
      console.log('method begins');
    }
  }
  </code></pre>
  
  <p>Tried using host listener as well but the scroll event just doesn't seem to occur.
  Has it got anything to do with the class i'm using on which the infinite scroll is applied?</p>