16

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?

1

4 Answers 4

30

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!!')
    }
}
1
  • 1
    Wow, thanks for the scrollWindow hint! That took me hours! :)
    – dave0688
    Dec 22, 2017 at 8:56
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 above HTML code it works fine --ngx-infinite-scroll

0
1

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
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.