dhilt / ngx-ui-scroll

Virtual/infinite scroll for Angular
https://dhilt.github.io/ngx-ui-scroll/
MIT License
222 stars 19 forks source link

server side pagination on scroll #248

Closed MahmoudTarekAli closed 3 years ago

MahmoudTarekAli commented 3 years ago

Hey, I am trying to use your library to implement infinite virtual scroll to my app, its a social media app something like Facebook and I am trying to use ngx-uiscroll on the newsfeed feature I have an array of object of posts with server side pagination what I am trying to achieve here is to start from page 0 user will have 5 posts for example... then after user reach end of the scroll(window) I will increase page +1 and send http request ( which return an observable) to fetch the new data from server and concat it with the pervious data.

If you please can illustrate how can i do that with your library I couldn't find demo or example like that and unfortunately i couldn't figure how to do it from your examples

thanks

dhilt commented 3 years ago

@MahmoudTarekAli I believe the datasource-pages demo might be what you are looking for. And especially "async" tab. This sample implements a conversion layer between page-offset API of the remote and index-count API of the scroller. Also, you might be interested in Chat App doc as it provides some useful techniques, like handling new items at runtime and caching.

MahmoudTarekAli commented 3 years ago

I saw this demo but I think it require to have all data at once ! not get it page by page from the server

dhilt commented 3 years ago

@MahmoudTarekAli It does not require all data. It emulates the remote data via this.data array which is local and is being initialized on the component start, but there is no direct access to this.data. Fake pages-API method getDataPage provides this access. You need to move the logic behind getDataPage to the server side and handle asynchronicity the way the "Component (async)" tab suggests. Here is also a stackblitz demo with step-by-step logging, it might help you to catch the idea of APIs conversion (it is sync too, you need to provide async logic in accordance with your requirements/environment).

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed within seven days if no further activity occurs. If it needs to remain open, add the "permanent" label.

stale[bot] commented 3 years ago

This issue has been automatically closed because it was stale.