CODEWITHSUNDEEP
javascripthtmlangular
Rijo
Rijo

Reputation: 3043

Angular 8 ngIf expression based on the drop down value

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.

app.component.html

<table border="1">
  <tr><td>Name</td><td>Age</td><td>New Age</td></tr>
  <tr><td>John</td><td><select (change)="editAge(selectField1.value)" #selectField1>
    <option value="1">Less than 10</option>
    <option value="2">Greater than 10 and Less than 80</option>
    <option value="3">Less than 80</option>
  </select></td><td> <span  *ngIf="!expression">24</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
  <tr><td>Jacky</td><td><select (change)="editAge(selectField2.value)" #selectField2>
    <option value="1">Less than 10</option>
    <option value="2">Greater than 10 and Less than 80</option>
    <option value="3">Less than 80</option>
  </select></td><td> <span  *ngIf="!expression">4</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
    <tr><td>Roy</td><td><select (change)="editAge(selectField3.value)" #selectField3>
      <option value="1">Less than 10</option>
      <option value="2">Greater than 10 and Less than 80</option>
      <option value="3">Less than 80</option>
    </select></td><td> <span  *ngIf="!expression">34</span> <span *ngIf="expression"><input type="text" /></span></td></tr>
</table>

app.component.ts

export class AppComponent {
  title = 'my-app';
  expression = false;
  nameBind: string;
  editAge(ee) {
    if (ee === '2') {
      this.expression = true;
    } else { this.expression = false;
}
  }
}

Expected o/p

I wan't to edit only the respective row Age

Current behavior

All the Age field is editable

Slackblitz

Upvotes: 2

Views: 1291

Answers (1)

Prashant Pimpale
Prashant Pimpale

Reputation: 10717

I will handle this case as below:

I will remove <span> tag and use value attribute to set the value for textbox itself and use change method to detect the changed value:

HTML Code:

<table border="1">
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>New Age</td>
    </tr>
    <tr>
        <td>John</td>
        <td><select (change)="editAge(selectField1.value)" #selectField1>
    <option value="1">Less than 10</option>
    <option value="2">Greater than 10 and Less than 80</option>
    <option value="3">Less than 80</option>
  </select></td>

        <td><input value="24" [disabled]="selectField1.value == 2" type="text" /></td>
    </tr>
    <tr>
        <td>Jacky</td>
        <td><select (change)="editAge(selectField2.value)" #selectField2>
    <option value="1">Less than 10</option>
    <option value="2">Greater than 10 and Less than 80</option>
    <option value="3">Less than 80</option>
  </select></td>
        <td> <input value="4" [disabled]="selectField2.value == 2" type="text" /></td>
    </tr>
    <tr>
        <td>Roy</td>
        <td><select (change)="editAge(selectField3.value)" #selectField3>
      <option value="1">Less than 10</option>
      <option value="2">Greater than 10 and Less than 80</option>
      <option value="3">Less than 80</option>
    </select></td>
        <td><input value="34" [disabled]="selectField3.value == 2" type="text" /></td>
    </tr>
</table>

TS Code:

editAge() {
  // do nothing
}

Working_Demo

Upvotes: 2

Related Questions