How use infinite scrolling with angular 5+?

Question

I am following this tutorial and I am not sure if it is out of date.

I am using @angular/core": "^5.2.0" So I am using this version [email protected]

I have added:

import { InfiniteScrollModule } from 'ngx-infinite-scroll'; and imported InfiniteScrollModule in app.module.ts.

In Search.component.ts I have added directives: [InfiniteScroll] tp @Component but It does not seem to exist any more when I tabbed through the options I had in 'ngx-infinite-scroll' I could see InfiniteScrollDirective but did not implement it.

The only way I can get the app to compile is to get rid of directives: [InfiniteScroll] but the infinite scroll does not work(It is just a normal scroll).

Html:

<div class="search-results"
     infiniteScroll
     [infiniteScrollDistance]="2"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()">
  <div *ngFor="let name of ['a','a','b','e','r','t','t','e','b','e','r','t','ererer','a','a','b','e','r','t','t','e','b','e','r','t','ererer']">
    <div>
      {{name}}
    </div>
  </div>
</div>

CSS:

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

My question is what enables the infinite scrolling?

Answer 1

You don't need directives: [InfiniteScroll]. The Import inside the module is enough.

Regarding the scroll itself - do you see calls to the function you defined (onScroll())?

Basically, the directive calls the (scrolled) function whenever a certain percentage of the element that contains the directive is shown in the viewport (80% by default).

For example, if you have a table with a height of 500px, then when 400px of it will enter the viewport (what you see on your screen), the scroll function will be called.