Angular 4: Infinite Scroll not working

Question

I tried using ngx-infin-scroll ( https://www.npmjs.com/package/angular2-infinite-scroll ), as well as some other directives, but none of them work.

package.json

"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" } 

user.component.html

 <div class="row" infiniteScroll [infiniteScrollDistance]="0" [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> <span>{{user.name}} ({{user.email}})</span> </div> </div> 

user.module.ts

Import completed

 import { InfiniteScrollModule } from 'ngx-infinite-scroll'; @NgModule({ imports: [ CommonModule, FormsModule, InfiniteScrollModule ], declarations: [UserComponent], providers: [], exports: [], }) export class UserModule { } 

user.component.ts

 export class UserComponent { constructor() {} loadMore() { console.log('method begins'); } } 

Tried to use a host listener, but the scroll event just doesn't seem to be. Does it have anything to do with the class I'm using, which uses infinite scrolling?

Answer 1

The document mentioned him.

By default, the directive listens for a window scroll event and a callback is called. To call a callback when the actual item scrolls, these settings must be configured:

• [ScrollWindow] = "false"
• set the css "height" value of an expression for an element

So just set the height: 100% to your container and you will see a scroll.

 import { Component } from '@angular/core'; @Component({ selector: 'app', styles: [ `.search-results { height: 20rem; overflow: scroll; }` ], template: ` <div class="search-results" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="500" (scrolled)="onScroll()" [scrollWindow]="false"> </div> ` }) export class AppComponent { onScroll () { console.log('scrolled!!') } } 

Answer 2

  <div [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="100" (scrolled)="onScrollDown()" [scrollWindow]="false"class="search-results"> <div *ngFor="let user of userList"> <span>{{user.name}} ({{user.email}})</span> </div> </div> 

.search-results {height: 100% overflow-y: scroll; }

use the html code above it works fine - angular2 infinite scroll

Answer 3

You must set the height of your container div

 <div class="row" style="height: 90%" infiniteScroll [infiniteScrollDistance]="0" [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> <span>{{user.name}} ({{user.email}})</span> </div> </div>