CODEWITHSUNDEEP
htmlangular6
Tenzolinho
Tenzolinho

Reputation: 982

Convert table cell to editable input

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 before pressing the red button

How the table looks after pressing the button How the table looks after pressing the button

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

Upvotes: 0

Views: 66

Answers (2)

madhukar reddy
madhukar reddy

Reputation: 129

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;
}

Upvotes: 0

sevic
sevic

Reputation: 972

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;
}

Upvotes: 1

Related Questions