title: Angular 2 - rxjs - Observable array
body: <p>In my template I subscribe to an observable array like so: </p>
  
  <pre><code>&lt;div *ngFor="let item of activities | async"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I changed my activities array to an observable array because I like the idea of the view subscribing and unsubscribing from my observables.</p>
  
  <p>My question is, after initially retrieving the observables and mapping them into an activities object array, how do I append or prepend activities to that array without overwriting the entire observable array? </p>
  
  <p>To be specific, I am creating an infinite scroll and upon the new http request completing, I have 12 new activity objects that I need to append to the activities observable array.</p>
  
  <p>Activities definition:</p>
  
  <pre><code>public activities: Observable&lt;Array&lt;ActivitiesItemModel&gt;&gt;;
  </code></pre>
  
  <p>My initial request: </p>
  
  <pre><code>this.activities = this._transactionService.Get(url)
    .map(activities =&gt; {
      // Creates an activities model which contains items&lt;ActivitiesItemModel&gt;
      return new activitiesModel(activities).items;
    })
  </code></pre>
  
  <p>My infinite scroll request:</p>
  
  <pre><code>// This is where I am stuck..
  // I assumed I could just map the values retrieved from the request
  this.activities
    .map(a =&gt; {
      return this._transactionService.Get(queryUrl)
        .map(activities =&gt; {
          infiniteScroll.complete();
  
          return activities;
        })
    })
  </code></pre>
  
  <p>Any ideas?</p>