title: How to hide a input field according to the value of selection in angular?
body: <p>I have three input fields :</p>
  
  <p><a href="https://i.stack.imgur.com/DMG7a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DMG7a.png" alt="enter image description here"></a></p>
  
  <p>All three fields are shown when the page is loaded first but when I select the value1 then address field should be shown and phone number should be hidden. Similarly when value2 is clicked phone number is shown and address is hidden.</p>
  
  <pre><code> &lt;div class="form-group col-md-3"&gt;
                 &lt;label for="age"&gt;Address&lt;/label&gt;
                 &lt;input type="text"
                  id="address" 
                  class="form-control" 
                  name="address"
                  placeholder="Enter the address" 
                  [(ngModel)]="selection.address" 
                  #address="ngModel"
                   [ngClass]="{ 'is-invalid': f.submitted &amp;&amp; selectionDate.invalid }"
                   required 
                   /&gt;
                   &lt;div *ngIf="f.submitted &amp;&amp; address.invalid" class="invalid-input"&gt;
              &lt;!-- individual validation errors --&gt;
              &lt;div *ngIf="address.errors?.required"&gt;Address is required&lt;/div&gt;
            &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-md-3"&gt;
                 &lt;label for="age"&gt;Phone Number&lt;/label&gt;
                 &lt;input type="text" 
                 id="phoneNumber"
                  class="form-control" 
                  name="phoneNumber"
                  placeholder="Enter the Phone number" 
                  [(ngModel)]="selection.phoneNumber" 
                  #phoneNumber="ngModel" 
                  [ngClass]="{ 'is-invalid': f.submitted &amp;&amp; phoneNumber.invalid }"
                   required /&gt;
                    &lt;div *ngIf="f.submitted &amp;&amp; phoneNumber.invalid" class="invalid-input"&gt;
              &lt;!-- individual validation errors --&gt;
              &lt;div *ngIf="phoneNumber.errors?.required"&gt;Phone Number is required&lt;/div&gt;
            &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;!--row 3--&gt;
           &lt;div class="col-md-12"&gt;
              &lt;div class="form-group col-md-3"&gt;
                 &lt;label for="selectionType"&gt;Selection Type&lt;/label&gt;
                 &lt;select class="form-control" id="selectionType" 
                  [(ngModel)]="selection.selectionType" name="selectionType"  required  #selectionType="ngModel"  [ngClass]="{ 'is-invalid': f.submitted &amp;&amp; selectionType.invalid }"&gt;
                 &lt;option value="value1"&gt;Value1&lt;/option&gt;
                 &lt;option value="value2"&gt;Value2&lt;/option&gt;
                 &lt;/select&gt;
                 &lt;div *ngIf="f.submitted &amp;&amp; selectionType.invalid" class="invalid-input"&gt;
              &lt;!-- individual validation errors --&gt;
              &lt;div *ngIf="selectionType.errors?.required"&gt;Selection Type is required&lt;/div&gt;
            &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>In this above original code, I tried to make changes like:</p>
  
  <pre><code>&lt;option value="value1" (click)="callme()"&gt;Value1&lt;/option&gt;
  </code></pre>
  
  <p>This is within the selection.component.ts file. I also tried to print to the console and tried to output my logic but I am not seeing any changes.</p>
  
  <pre><code>callme(){
      console.log("call me");
  }
  </code></pre>
  
  <p>How can I achieve this? Is there a new method to do it?</p>