title: Observable<Object[]> - Can I skip/take?
body: <p>I want to imlpement infinite-scrolling on my list of objects, they are <code>Observable&lt;Object[]&gt;</code>. Transferring them to promise and <code>await</code>ing them is not an option since they need to be updated in realtime.</p>
  
  <p>What I did is used <code>.map()</code> which kind-of works, but the problem is that angular is re-rendering the whole list whenever I take <code>20</code> items instead of <code>10</code> for example.</p>
  
  <p>One solution would be to actually skip first <code>10</code> and load next <code>10</code> which would only add new elements to the page. However I'm not sure if it is possible?</p>
  
  <p>Here is what I have</p>
  
  <p>Typescript</p>
  
  <pre><code>// 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 =&gt; {
      return _.take(data, this.take);
    });
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="sales-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="this.onScroll()"&gt;
    &lt;app-sales-item *ngFor="let sale of this.sales | async" [sale]="sale"&gt;&lt;/app-sales-item&gt;
  &lt;/div&gt;
  </code></pre>