CODEWITHSUNDEEP
angularinfinite-scrollnginfinitescroll
Sanchit Tandon
Sanchit Tandon

Reputation: 181

Angular 4: Infinite scroll not working

I have tried using ngx-infinite-scroll (https://www.npmjs.com/package/angular2-infinite-scroll) and also some other directives but none seem to 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

The import is done

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 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?

Upvotes: 16

Views: 33653

Answers (4)

Mo&#39;men Adell
Mo&#39;men Adell

Reputation: 11

all i did was changing ngx-infinite-scroll version to be compatiable with my angular version i use angular 12

in package.json

ngx-infinite-scroll": "^10.0.1"

remove node_modules and package-lock.json then run :

npm i

Upvotes: 1

Rajesh Pandhare
Rajesh Pandhare

Reputation: 49

       <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 above HTML code it works fine --ngx-infinite-scroll

Upvotes: 2

trungvose
trungvose

Reputation: 20034

Inside the document has mentioned about.

By default, the directive listens to the window scroll event and invoked the callback. To trigger the callback when the actual element is scrolled, these settings should be configured:

  1. [scrollWindow]="false"
  2. set an explict css "height" value to the element

Therefore, just put the height: 100% on your container and you will see the scrolled fired. 

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!!')
    }
}

Upvotes: 31

Dragan M.
Dragan M.

Reputation: 1

You have to set 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>

Upvotes: 0

Related Questions