title: Why is async function causing ViewChild to be undefined in ngOnInit()
body: <p>Here is by Component which has a ViewChild referring to <code>#h1</code> in the html:</p>
  <pre><code>import { Component, ElementRef, ViewChild } from '@angular/core';
  @Component({
    selector: 'app-root',
    template: `
    &lt;h1 #h1 *ngIf=&quot;showh1&quot;&gt;
      Welcome to {{title}}!
    &lt;/h1&gt;
    `,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
    public showh1: boolean = false;
    @ViewChild('h1') h1: ElementRef;
    ngOnInit() {
      setTimeout(() =&gt; { //http.get in actual scenario
        this.showh1 = true;
        console.log('h1:' + this.h1);   //h1:undefined
        setTimeout(() =&gt; {
          console.log('h2:' + this.h1); //h2:[object Object]
        }, 1);
      }, 1000);
    }
  }
  </code></pre>
  <p>Why <code>this.h1</code> is <code>undefined</code> at <code>console.log('h1:' + this.h1);</code> ?</p>
  <p><strong>Update 2020 Nov</strong>
  You wouldn't be in this situation if you are using latest Angularv9 which has <a href="https://stackoverflow.com/q/56359504/234110">static</a> option on <code>@ViewChild</code>.</p>