I am new in angular 4. I want to implement infinite scrolling in angular, want to make http call to get first 10 items after scrolling div want to call http request to get next 10 items and appends to the first array. Can u please guide me how to do this?
3 Answers
I had the same issue, if you're using ngx-infinite-scroll, follow the steps in https://github.com/orizens/ngx-infinite-scroll, import the module in your app.module.ts
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
Then in @NgModule:
@NgModule({
imports:[ BrowserModule, InfiniteScrollModule ],
declarations: [ AppComponent, ],
bootstrap: [ AppComponent ]
})
Like my case, If you work with more than one module and you want to use in a specific module, import it in that module.
Comments
You can use for example this library https://www.npmjs.com/package/ngx-infinite-scroll
<div infiniteScroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50"
(scrolled)="onScroll()">
</div>
Then implement onScroll() where you need to load next 10 records and appends them to existing array.
4 Comments
Sneha Pawar
Thanks for answering. @Anton using ngx-infinite-scroll i am getting error of infinitescrolldistance donot have atrribute of div element. I am not getting why this error occurs.
Anton Lee
You need to add InfiniteScrollModule in AppModule. Try example that represented in
ngx-infinte-scrollSneha Pawar
i added that module in my app module still i m getting same error.
Isaque Saraiva
I am getting this same error, how do I fix it? This error: Can't bind to 'infiniteScrollDistance' since it isn't a known property
hello i will give u as idea or use : https://www.npmjs.com/package/angular2-infinite-scroll
<div (window:scroll)="onScroll($event)">
<li *ngFor="let item of data">{{data}}</li>
...
</div>
you can call your service on scroll event and concate data to the data array:
let data = [];
let pageNumber =1;
onScroll(event) {
myservice.getdata(pageNumber).subscribe(elements
=> {
this.data.concat(elements);
pageNumber++
})
}
1 Comment
Sneha Pawar
using (window:scroll) solution when i scroll window it called Onscroll method every time i dont want this. want to scroll only particular div.
