title: Angular: Components do not get updated with data from public service variable
body: <p>Since there are not a lot of <code>Source</code> items in this app, I thought I'd be clever and design a service that also acts as a repository, and update internally whenever the service adds, updates or removes an item.</p>
  
  <p>In order to populate the repository on the first use, my main component then runs <code>listSources()</code> once by subscribing to it. All other components get the service injected and in their templates I use <code>let source of sourceService.sources</code> to get the sources.</p>
  
  <p>However, when I alter the sources through <code>addSource()</code> or any other means, these changes are not reflected in my other components. I also tried using a subject, but that got even more confusing and didn't work for me either.</p>
  
  <p>Anyone know what I'm doing wrong?</p>
  
  <p>This is the service:</p>
  
  <pre><code>export class SourceService { // truncated for brevity
    public sources: Source[] = [];
  
    constructor( ) { } 
  
    public listSources(): Observable&lt;Source[]&gt; {
      // if sources are already loaded, just return from memory
      if (this.sources.length &gt; 0) {
        return of(this.sources);
      }
  
      return this.http.get&lt;Source[]&gt;(sourceUrl, httpOptions).pipe(
          tap(sources =&gt; {
          sources.forEach((source, index, sources) =&gt; {
            this.sources.push(source);
          });
          });
    }
  
    public addSource(source: Source): Observable&lt;Source&gt; {
      return this.http.post&lt;Source&gt;(sourceUrl, source, httpOptions).pipe(
        tap(data =&gt; {
          // update memory
          this.sources.push(Object.assign(new Source(), Source.EMPTY_MODEL));
        })
      );
    }
  </code></pre>
  
  <p>elsewhere, a component which has <code>sourceService</code> injected, has the following template:</p>
  
  <pre><code>&lt;mat-option *ngFor="let source of sourceService.sources" [value]="source.id"&gt;{{ source.title }}&lt;/mat-option&gt;
  </code></pre>