title: Get value from input-tag that is conditionally visible with *ngIf
body: <p>I've got a simple form in HTML. Depending on the option chosen with the radio button, there are different input fields visible, using *ngIf.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;name&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input #name /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="radio" name="contact" value="phone" (click)="usePhone(true)" #p&gt;
              &lt;label for"p"&gt;phone&lt;/label&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="radio" name="contact" value="email" (click)="usePhone(false)" #m&gt;
              &lt;label for"m"&gt;email&lt;/label&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr *ngIf="phone"&gt;
          &lt;td&gt;&lt;label&gt;phone&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input #phone /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr *ngIf="!phone"&gt;
          &lt;td&gt;&lt;label&gt;email&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input #email /&gt;&lt;/td&gt;
      &lt;/tr&gt;
   &lt;table&gt;
  </code></pre>
  
  <p>In the TypeScript file, I declare a varibale "phone" of the type boolean and a method:</p>
  
  <pre><code>usePhone(phone: boolean): void {
      this.phone = phone
  }
  </code></pre>
  
  <p>Now, I want to get the values when clicking on a button:</p>
  
  <pre><code>&lt;button (click)="add(name.value, phone.value, email.value);"&gt;
      OK
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>But when I try it, the browser console says that phone is undefined, even when it is chosen and visible. When I delete the *ngIf statements, so that everything is visible, it works properly. What can I do?</strong></p>