title: #elmentRef remains undefined when used with *ngIf in angular2
body: <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>