title: Add object to the beginning of an observable array
body: <p>I have an Angular component that lazy loads data to an <code>Observable&lt;Item[]&gt;</code> through a <code>BehaviorSubject&lt;Item[]&gt;</code> when the scroll position of a container reaches the bottom.</p>
  
  <p>The needed properties and the <code>init()</code> function that initializes the list of items look like</p>
  
  <pre><code>private _itemList: BehaviorSubject&lt;Item[]&gt;;
  private _done = new BehaviorSubject(false);
  private _loading = new BehaviorSubject(false);
  private _page: number;
  itemList: Observable&lt;Item[]&gt;;
  
  init() {
      this._page = 0;
      this._itemList = new BehaviorSubject([])
      this.mapAndUpdate();
      this.itemList = this._itemList.asObservable()
      .scan((acc, val) =&gt; {
          return acc.concat(val);
      });
  }
  </code></pre>
  
  <p>and the function that does the actual fetching of data</p>
  
  <pre><code>mapAndUpdate() {
      if (this._done.value || this._loading.value) {
          return;
      }
  
      this._loading.next(true);
      const offset = this._page * 20;
      const limit = 20;
      return this.service.getItems(limit, offset)
      .do(res =&gt; {
          this._itemList.next(res.items);
          this._loading.next(false);
          if (!res.items.length) {
              this._done.next(true);
          }
      }).subscribe();
  }
  </code></pre>
  
  <p>In the same component, I'm subscribing to realtime push events that can emit new items which should be added to the beginning of the array instead of the end of the array.</p>
  
  <pre><code>subscribeToItemsChannel() {
      this.pusherService.getItemsChannel().bind('new-item', (res: any) =&gt; {
          const item = res.item as Item;
  
          // Emitting the item with next() will only add it to the end of the array
          this._itemList.next([item]);
      });
  }
  </code></pre>
  
  <p>I've tried to use a boolean value <code>shouldPrepend</code> that I set in the realtime function handler together with</p>
  
  <pre><code>.scan((acc, val) =&gt; {
      if(this._shouldPrepend) {
          return val.concat(acc);
      } else {
          return acc.concat(val);         
      }
  });
  </code></pre>
  
  <p>which does add the new item to the beginning, but also messes up the order of the rest of the array and it doesn't feel like the correct rxjs way to do it either.</p>
  
  <p>How can I at any given random moment prepend an object to an <code>Observable&lt;array&gt;</code>?</p>
  
  <p><a href="http://jsbin.com/madenocone/1/edit?js,console" rel="nofollow noreferrer">Here is a JSBin</a> that better explains the problem.</p>