Ndtyjky

I am new to the RxJS library.

What I am trying to achieve is to get infinite scroll working properly on a page (smart component). Observable that contains data that is supposed to be displayed is initially an array of ten objects. As soon as user scrolls to the bottom of the page, is where I am trying to append or concatenate the observable with the next ten objects. Template that shows data is looping through with *ngFor and async pipe. I can paste that code too if needed.

I have figured out when the scroll method is triggered and how to keep track of how many elements I have, so I can do a http request for next ten objects.

Looking at the documents from me it makes sense that concat operator is perfect for me, but could not make it work. After a lot of digging I finally found this thread: Combining 2 arrays in correct sequence using Rx.js

My last method is from the thread I linked. It does actually make observable accumulate by ten elements, but the problem is that it scrolls at top everytime that happen, which is not desirable. Are there more convenient ways to achieve this ? And how do I prevent the page to scroll at top?

Here is the HTTP method in service class:

//Returns all articles corresponding to given categorytitle as input parameter



public getCategoryArticles(httpParams: HttpParameters): Observable<Article>{



  const headers = new Headers().set('Content-Type', 'application/json');



  const params = this.createHttpParams(httpParams);



  return this.HTTP_GET({headers: headers, params: params}).pipe(

    map((data: any) => {

      return data.stream.current.map((categoryData: any) => {

        return {

          id: categoryData.siObj.id,

          headline1: categoryData.siObj.headline1,

          headline2: categoryData.siObj.headline2,

          headline3: categoryData.siObj.headline3,

          lead: categoryData.siObj.lead,

          byline: categoryData.siObj.byline,

          body: categoryData.siObj.body,

          media: categoryData.siObj.media

        };

      });

    }),

    catchError((error) => {

      return throwError(`A problem has occured. More info: ${error}`);

    })

  );

}

Here are some of the methods in page class (smart component). Initial statements:

ngOnInit(){

    this.from = 0;

    this.categoryKey = this.route.snapshot.paramMap.get('key');

    this.categoryCount = Number(this.route.snapshot.paramMap.get('count'));

    this.category$ = this.getCategoryArticles(this.categoryKey, this.from);

}

HTTP request from page class.

getCategoryArticles(categoryAsString: string, from: number): Observable<Article> {

    const httParams: HttpParameters = {

      aType: "stream", 

      action: "getStream",

      categoriesAsString: categoryAsString, 

      from: String(from),

      size: "10"

    };

    this.from = this.from + 10;

    return this.networkService.getCategoryArticles(httParams); 

}

Infinite scroll method.

 //Triggered when scrolling at bottom of page

  loadData(){ 

    this.category$ = this.category$.pipe(

      combineLatest(this.getCategoryArticles(this.categoryKey, this.from))

      ,map(([current, latest]) => {

        return [...current, ...latest];

      })

    );

  }