Observable

I want to imlpement infinite-scrolling on my list of objects, they are Observable<Object[]>. Transferring them to promise and awaiting them is not an option since they need to be updated in realtime.

What I did is used .map() which kind-of works, but the problem is that angular is re-rendering the whole list whenever I take 20 items instead of 10 for example.

One solution would be to actually skip first 10 and load next 10 which would only add new elements to the page. However I'm not sure if it is possible?

Here is what I have

Typescript

// Every time this happens page goes to top
// because all the items are re-rendered, not only new ones
public onScroll(): void {
  this.take += 10; // on ngOnInit() take is set to 10.
  this.sales = this.filteringObservable.map(data => {
    return _.take(data, this.take);
  });
}

HTML

<div class="sales-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="this.onScroll()">
  <app-sales-item *ngFor="let sale of this.sales | async" [sale]="sale"></app-sales-item>
</div>

from Observable