How to implement infinite-scroll pagination in Angular7?

Question

I have an object with params i want to send.
So ngOnInit works, but what i need onScrollDown add to my params pageNumber + 1 everytime i scroll.
How can i do that ?

questionListParams = {
    pageNumber: 1,
    pageSize: 10,
};


ngOnInit() {
    this.questionsHttpRequests.getQuestions(this.questionListParams).subscribe((response) => {
        this.listOfQuestions = response;
    });
}


onScrollDown() {
    this.questionsHttpRequests.getQuestions((this.questionListParams)).subscribe((response) => {
        this.listOfQuestions.push(...response);
    });
}

You asked "i need onScrollDown add to my params pageNumber + 1". That what that does. What is your actual question/problem if it's not that? — JB Nizet, Mar 15 '19 at 15:09
I think he wants to implement infite-scrolling of a page.. When the user scrolls it automatically fetches the next page @JB Nizet — Krishna, Mar 15 '19 at 15:15
If your server is returning a new non-overlapping collection then you should be able to add it to you existing collection using the JavaScript concat method this.listOfQuestions.concat(response). You need to make sure the new record set is incremental. However, I would not recommend doing another http request on every scroll down event. This is going to be extremely non performant for anything but a trivial case. You should really load all the data initially then the scrolling will just work. If the collection is too large you can do the initial call asynchronously and page the data in. — BruceK, Mar 15 '19 at 15:18

score 0 · Answer 1 · answered Mar 15 '19 at 15:10

You can increment before or after making the call.

onScrollDown() {
// Before
this.questionListParams.pageNumber++; 
 this.questionsHttpRequests.getQuestions((this.questionListParams)).subscribe((response) => {
        this.listOfQuestions.push(...response);
    });
// Or after
this.questionListParams.pageNumber++; 
}

How to implement infinite-scroll pagination in Angular7?

1 Answers1