title: Angular2 Observable List
body: <p>I'm running into some issues in my Ionic application (data updated asynchronously but UI not updating accordingly). I've scratched my head over this issue for long and now am trying to test a different approach: using <code>Observables</code>. But I'm unsure how to implement it. Tutorials with <code>Observables</code> on the net focus on using <code>Http</code> service which already returns an <code>Observable</code>. My scenario is as follows:</p>
  
  <p>I have a <code>DataService</code> containing a list of <code>Person</code> objects. The service has a getter that returns this list. </p>
  
  <pre><code>export class DataService {
    private _list: Person[] = [];
    get list(): Person[] { return this._list }
  }
  </code></pre>
  
  <p>Earlier on, I was directly using this list in my components:</p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-item *ngFor="let person of dataService.list"&gt;
      {{person.name}}
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>Now I want to add another getter to <code>DataService</code> that would return an <code>Observable</code> of the <code>Person[]</code> list instead. What I don't know is:</p>
  
  <ol>
  <li>How and where to define a <code>Observable</code> for the list. Do I define an <code>Observable</code> as a <code>DataService</code> property and initialise it in the constructor or do I return a new <code>Observable</code> directly from the service getter? And how do I wrap the list in an <code>Observable</code>?</li>
  <li>How to use this <code>Observable</code> getter in my component? *ngFor="???"</li>
  <li>When the list is changed asynchronously, how do I signal to the <code>Observable</code> that the list has been modified?</li>
  </ol>
  
  <p>I'm hoping this will solve my UI-not-updating issues.</p>