#elmentRef remains undefined when used with *ngIf in angular2
<p>In angular 2 when <strong>#elementReference</strong> is used with <strong>*ngIf</strong> the reference to the element remains <code>undefined</code> even after <strong>*ngIf</strong> expression evaluates to <code>true</code>. In following example the <code>input's</code> value will not be shown.</p>

<pre><code>&lt;input *ngIf="true" type="text" #myRef (input)="a = 'b';" class="form-control input-lg"&gt;
&lt;pre&gt; {{ myRef?.value }} &lt;/pre&gt;
</code></pre>

<p>But however following will work (surprised me).</p>

<pre><code>&lt;div *ngIf="true"&gt;
          &lt;input type="text" #myRef (input)="a = 'b';" class="form-control input-lg"&gt;
          &lt;pre&gt; {{ myRef?.value }} &lt;/pre&gt;
      &lt;/div&gt;
</code></pre>

<p>My question is how do I get the #reference to the element from anywhere in the template when used with *ngIf like directives. </p>