title: Paginating observable Array
body: <p>I want to display list of documents that are fetched from Firestore.
  I'd like to display 5 documents by default and show a "Load more" button that will fetch another 5 documents when clicked.</p>
  
  <p>With a static list, I'd do it like this, rather easy:</p>
  
  <pre><code>loadMoreInvoices() {
    //Get number of last item
    var lastItemInvoiceNumber = (this.invoices[this.invoices.length-1] as any).invoice_number;
  
    this.afs.collection('clients').doc(uid).collection('invoices', ref =&gt; ref.orderBy('invoice_number').startAt(lastItemInvoiceNumber).limit(5+1)).get().then(snap =&gt; {
  
      //Remove first elem from array as it is a duplicate
      snap.shift()
      //Add all loaded invoices to array
      snap.forEach(item =&gt; {
        this.invoices.push(item)
      })
  
      //Check if there are any more invoices to be loaded and set status accordingly
      if (snap.length &lt; this.moreInvoicesToBeLoaded) {
        this.noMoreInvoices = true;
      } else {
        this.noMoreInvoices = false;
      }
    });
  }
  
  ngOnInit() {
      this.afs.collection('clients').doc(uid).collection('invoices', ref =&gt; ref.orderBy('invoice_number').limit(invoicesToBeLoaded)).get().then(snap =&gt; {
          if (invoices.length &lt; this.invoicesToBeLoaded) {
              //Display "Load more" only if false
              this.noMoreInvoices = true;
          }
          this.invoices = invoices;
          this.loaded = true;
      })
  }
  </code></pre>
  
  <p>How can I get the same behaviour using Observables instead of static data?
  The way I did it above would result in a corruption of the list after <code>this.invoices</code> changes due to the Observable.</p>