title: Angular 8 ngIf expression based on the drop down value
body: <p>I have a configured custom table generator using Angular, the table have drop down value and the text field value. Based on the drop down value I need to make the respective table cell should be editable. </p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;table border="1"&gt;
    &lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Age&lt;/td&gt;&lt;td&gt;New Age&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;John&lt;/td&gt;&lt;td&gt;&lt;select (change)="editAge(selectField1.value)" #selectField1&gt;
      &lt;option value="1"&gt;Less than 10&lt;/option&gt;
      &lt;option value="2"&gt;Greater than 10 and Less than 80&lt;/option&gt;
      &lt;option value="3"&gt;Less than 80&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;&lt;td&gt; &lt;span  *ngIf="!expression"&gt;24&lt;/span&gt; &lt;span *ngIf="expression"&gt;&lt;input type="text" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Jacky&lt;/td&gt;&lt;td&gt;&lt;select (change)="editAge(selectField2.value)" #selectField2&gt;
      &lt;option value="1"&gt;Less than 10&lt;/option&gt;
      &lt;option value="2"&gt;Greater than 10 and Less than 80&lt;/option&gt;
      &lt;option value="3"&gt;Less than 80&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;&lt;td&gt; &lt;span  *ngIf="!expression"&gt;4&lt;/span&gt; &lt;span *ngIf="expression"&gt;&lt;input type="text" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Roy&lt;/td&gt;&lt;td&gt;&lt;select (change)="editAge(selectField3.value)" #selectField3&gt;
        &lt;option value="1"&gt;Less than 10&lt;/option&gt;
        &lt;option value="2"&gt;Greater than 10 and Less than 80&lt;/option&gt;
        &lt;option value="3"&gt;Less than 80&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;&lt;td&gt; &lt;span  *ngIf="!expression"&gt;34&lt;/span&gt; &lt;span *ngIf="expression"&gt;&lt;input type="text" /&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>export class AppComponent {
    title = 'my-app';
    expression = false;
    nameBind: string;
    editAge(ee) {
      if (ee === '2') {
        this.expression = true;
      } else { this.expression = false;
  }
    }
  }
  </code></pre>
  
  <p>Expected o/p</p>
  
  <p>I wan't to edit only the respective row Age</p>
  
  <p>Current behavior</p>
  
  <p>All the  Age field is editable</p>
  
  <p><a href="https://stackblitz.com/edit/angular-guyvdn?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Slackblitz</a></p>