title: @ViewChild in *ngIf
body: <h2>Question</h2>
  <p>What is the most elegant way to get <code>@ViewChild</code> after corresponding element in template was shown?</p>
  <p>Below is an example. Also <a href="http://plnkr.co/edit/xAhnVVGckjTHLHXva6wp?p=preview" rel="noreferrer">Plunker</a> available.</p>
  <p><strong>Component.template.html:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;layout&quot; *ngIf=&quot;display&quot;&gt;
    &lt;div #contentPlaceholder&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Component.component.ts:</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class AppComponent {
  
      display = false;
      @ViewChild('contentPlaceholder', { read: ViewContainerRef }) viewContainerRef;
  
      show() {
          this.display = true;
          console.log(this.viewContainerRef); // undefined
          setTimeout(() =&gt; {
              console.log(this.viewContainerRef); // OK
          }, 1);
      }
  }
  </code></pre>
  <p>I have a component with its contents hidden by default. When someone calls <code>show()</code> method it becomes visible. However, before Angular 2 change detection completes, I can not reference to <code>viewContainerRef</code>. I usually wrap all required actions into <code>setTimeout(()=&gt;{},1)</code> as shown above. Is there a more correct way?</p>
  <p>I know there is an option with <code>ngAfterViewChecked</code>, but it causes too much useless calls.</p>
  <h2><a href="http://plnkr.co/edit/myu7qXonmpA2hxxU3SLB?p=preview" rel="noreferrer">ANSWER (Plunker)</a></h2>