Convert table cell to editable input

Question

I want to create a table with 2 columns: Name, Email. Everytime I press the edit button, I want to transform the td into editable inputs. The problem is that if I have more users and I press the edit button, all users will become editable, not just the selected one. How can I solve this problem?

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of usersList">
      <td *ngIf="!editUser">{{ user.name }}</td>
      <td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>

      <td *ngIf="!editUser">{{ user.email }}
      <td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>

      <td *ngIf="!editUser">
        <a class="action-btn" (click)="onEdit()">
          <p class="material-icons pointer">edit</p>
        </a>
      </td>
    </tr>
  </tbody>
</table>

editUser: boolean = false
onEdit() {
  this.editUser = !this.editUser
}

How the table looks before pressing the red button

How the table looks after pressing the button

Thank you for your time! (this is what I want to achieve

score 1 · Answer 1 · answered Oct 11 '18 at 08:32

Do you have an id for the user?

Then you could do something like:

<tbody>
  <tr *ngFor="let user of usersList">
    <td *ngIf="editUserId !== user.id">{{ user.name }}</td>
    <td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>

    <td *ngIf="editUserId !== user.id">{{ user.email }}
    <td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>

    <td *ngIf="editUser !== user.id">
      <a class="action-btn" (click)="onEdit(user.id)">
        <p class="material-icons pointer">edit</p>
      </a>
    </td>
  </tr>
</tbody>

and

editUserId: number;
onEdit(userId: number) {
  this.editUserId = userId;
}

score 0 · Accepted Answer · answered Oct 11 '18 at 10:16

Try this, it will work for you.

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of usersList; index as i">
      <td *ngIf="i!=selectedRowIndex">{{ user.name }}</td>
      <td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1" 
        type="text" [(ngModel)]="user.name"></td>
          <td *ngIf="i!=selectedRowIndex">{{ user.email }}
      <td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1" 
               type="text" [(ngModel)]="user.email"></td>
          <td>
        <a class="action-btn" (click)="onEdit(i)">
          <p class="material-icons pointer">edit</p>
        </a>
      </td>
    </tr>
  </tbody>
</table>

selectedRowIndex = -1
onEdit(rowIndex) {
  this.selectedRowIndex = rowIndex;
}

Convert table cell to editable input

2 Answers2