title: Why does new data to an async pipe not cause data to rerender?
body: <p>I've been reading a lot of background on Angular/ReactJS and trying to get a good understanding of the lifecycle hooks and how it all plays together, but something that still confuses me is the following scenario.</p>
  
  <p>Say you have a someService and in that service you define a BehaviorSubject called someBehaviorSubject. It is defined inside someService as:</p>
  
  <pre><code>public someBehaviorSubject= new BehaviorSubject&lt;someInterface[]&gt;([]);
  </code></pre>
  
  <p>That behavior subject is then subscribed to <code>someAPIcall(argument: string): void</code>. someService.someAPIcall is defined as:</p>
  
  <pre><code>someAPIcall(argument: string): void {
    this.http.get&lt;someInterface[]&gt;(argument).subscribe(this.someBehaviorSubject);
  }
  </code></pre>
  
  <p>someInterface is defined as:</p>
  
  <pre><code>interface someInterface {
    data: string
  }
  </code></pre>
  
  <p>Say there is a parent component called someParent and a child called someChild. someParent has two buttons which call:</p>
  
  <pre><code>someService.someAPIcall("A");
  </code></pre>
  
  <p>and</p>
  
  <pre><code>someService.someAPIcall("B");
  </code></pre>
  
  <p>respectively. someChild has the following in a template:</p>
  
  <pre><code>&lt;div*ngFor="let data of someService.someBehaviorSubject | async"&gt;
    {{data}}
  &lt;/div&gt;
  </code></pre>
  
  <p>In my observations, when you click button A or button B in someParent, the data correctly renders either dataset A or B. However, if you click the other button after the first set of data has rendered it <strong>does not</strong> rerender the data with the new dataset. I expected that it would with the async pipe being directly subscribed to the BehaviorSubject. I don't understand why the data isn't redrawn?</p>