title: Timing problem between OnInit and async-pipe
body: <p>I have a problem with the <code>async</code>-pipe in combination with an <code>Observable</code> which gets it's first value in <code>OnInit</code>. Must be a timing issue about the point in time when <code>OnInit</code> happens and the one when the template gets rendered and thus the <code>Observable</code> get subscribed.</p>
  <p>Consider this component:</p>
  <pre class="lang-ts prettyprint-override"><code>export class AppComponent implements OnInit {
  
      subjectA$: Subject&lt;{name:string}&gt;;
      subjectB$: Subject&lt;{name:string}&gt;;
  
      constructor(
          protected http: HttpClient
      ) {
      }
  
      ngOnInit() {
          this.subjectA$ = new Subject&lt;{name: string}&gt;();
          this.subjectA$.next({name: &quot;A&quot;});
  
          this.subjectB$ = new Subject&lt;{name: string}&gt;();
          setTimeout(() =&gt; {
            this.subjectB$.next({name: &quot;B&quot;});
          }, 0);
      }
  
  }
  </code></pre>
  <p>and the template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p *ngIf='subjectA$ | async as subjectA; else: nosubjectA'&gt;
    subjectA: {{subjectA.name}}
  &lt;/p&gt;
  
  &lt;ng-template #nosubjectA&gt;
    &lt;p&gt;no subjectA&lt;/p&gt;
  &lt;/ng-template&gt;
  
  &lt;p *ngIf='subjectB$ | async as subjectB; else: nosubjectB'&gt;
    subjectB: {{subjectB.name}}
  &lt;/p&gt;
  
  &lt;ng-template #nosubjectB&gt;
    &lt;p&gt;no subjectB&lt;/p&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>This results in</p>
  <pre><code>no subjectA
  
  subjectB: B 
  </code></pre>
  <p>That means: Even if <code>subjectA$</code> got a value in <code>onInit</code>, the view is not updated. If I wrap around the creation of the first value in a <code>setTimeout</code> as you can see with <code>subjectB$</code>, it works and I see the value. Although this is a solution I am wondering <strong>why does this this happen and is there a better solution?</strong></p>
  <p>One solution I already found would be using <code>BehaviorSubject</code> instead an provide the first value as initial value:</p>
  <pre class="lang-ts prettyprint-override"><code>
          this.subjectC$ = new BehaviorSubject&lt;{name: string}&gt;({name: &quot;C&quot;});
  </code></pre>
  <p>leads to <code>subjectC: C</code> with analogous template for subjectC.</p>
  <p><a href="https://stackblitz.com/edit/nginit-async-problem" rel="nofollow noreferrer">Try all on StackBlitz.</a></p>
  <p>My real observable is no <code>Subject</code> at all but the result of a <code>combineLatest</code>-call of different stuff, from which only one is (and have to unfortunately since it is using a value from an <code>@Input()</code>-annotation) a <code>Subject</code>, and manually pushed with <code>next</code> in <code>OnInit</code> as in the example. The rest comes from <code>http</code> et al. Most likely I could wrap the combined result in a <code>BehaviourSubject</code> but it seems ugly and dangerous to me, so it's even worse then the <code>setTimeout</code> approach. But I bet someone can help me out and find a real useful solution.
  In addition, I would prefer to avoid <code>BehaviorSubject</code>, to prevent developers from being tempted to use <code>getValue</code>.</p>
  <p><a href="https://stackblitz.com/edit/nginit-async-problem-7wnvts" rel="nofollow noreferrer">See on Stackblitz</a></p>