title: async pipe sends 'null' value to the child component
body: <p>I want to pass a value to the child component. this value is an Observable, so I use async pipe.</p>
  
  <pre><code>&lt;child [test]="test$ | async"&gt;&lt;/child&gt;
  </code></pre>
  
  <p>test$ is just a normal observable variable, that emits values after a period of time (3000 ms), simulating an API request to the server.</p>
  
  <pre><code>this.test$=timer(3000).pipe(
        mapTo("value")      
   )
  </code></pre>
  
  <p>in child component, I just want to check <code>test</code> value</p>
  
  <pre><code>@Input() test: any;
  
  constructor(){
      console.log("child/test", this.test); //null
      setTimeout(()=&gt;console.log("child/test (timeout)", this.test),4000) //value
  
     if(this.test){
       //maintain and check `this.test`
       //this code will not run, because at this point `this.test` is null.
       //we don't know the exact time that `this.test` will have a value
       //this causes that `this.test` is wrong
  
        this.checked=true 
       }
    }
  
  </code></pre>
  
  <pre><code>&lt;div *ngIf="checked"&gt;{{test}}&lt;/div&gt;
  </code></pre>
  
  <p>I don't want to change the type of test to be <code>Observable</code> and subscribe to it.
  I want to receive the final value directly.
  and I don't want to modify the edit component at all.</p>
  
  <p>using <code>ChangeDetectorRef</code> to manually trigger the change detector is not </p>
  
  <pre><code>@Input() test$:Observable
  
  constructor(){
    this.test$.subscribe(v=&gt;this.test=v)
  }
  </code></pre>
  
  <p>I also made this <a href="https://stackblitz.com/edit/formobj-7520?file=src%2Fapp%2Fchild.ts" rel="noreferrer">stackblitz</a> to check the value changing among all the compoonent's hooks.</p>