How to edit table row only when edit is clicked in template-driven form Angular 12?

Question

I have my table that is editable by clicking on a hyperlink and a button to save the updated data. I click edit and what I want to happen is for the row on which the edit link is clicked on that row will be the one that is editable. Right now my problem is that when edit is clicked all rows are editable. I included the html and typescript that I use to edit the table rows.

html

   <tbody>
        <tr *ngFor="let user of displayForm.users; let i = index" >
          <th scope ="row">{{ i + 1 }} </th>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=1"> {{user.firstName}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=2"> {{user.lastName}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=3"> {{user.sex}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=4"> {{user.birthday | date}} </td>
          <td>
              <button *ngIf= "this.enableEdit && this.enableEditIndex == i" (click)="enableEdit=false; isEditable=false" class = "btn" ng-click = "cancel()">Cancel</button>
              <button *ngIf= "this.enableEdit && this.enableEditIndex == i" id = "saveBtn" class="btn" (click)="submitEdit(i); enableEdit=false" type = "submit">Save</button> 
          <p> <a [routerLink]="" class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEditing($event, i)">
                         edit
              </a> </p>
                  </td>
        </tr>
    </tbody>

ts

  
    enableEditing(e: any,i: any){
        this.enableEdit = true;
        this.enableEditIndex = i;
        console.log(i,e);
        console.log("before assignment: " + this.isEditable);
        this.isEditable = true;
        console.log("after assignment: " + this.isEditable);
    }
    
    saveEdit(event: any, name: string){
        this.editUser = event.target.outerText as string;
        this.editName = name;
    }
    
    submitEdit(index: number){
      switch(this.userNum)
      {
        case 1:
        //only assign the data if it is the row we are editing
        //only did it for this case statement because I was testing if it would work
            if(this.displayForm.users[index].firstName == this.editName)
            {
                this.displayForm.users[index].firstName = this.editUser;
                break;
            }
            else
            {
             this.isEditable = false;   
             break;
            }
        case 2:
            this.displayForm.users[index].lastName = this.editUser;
            break;
        case 3:
            this.displayForm.users[index].sex = this.editUser;
            break;
        case 4:
            let userDate = new Date(this.editUser);
            this.displayForm.users[index].birthday = userDate;
            break;
      } 
      
      console.log(this.displayForm.users);
    }

Answer 1

I presume the [contentEditable] directive is what makes your row editable, in this case the condition should also take into consideration the index of the row.

You should try to change

<td [contentEditable]="isEditable" ...

into something like

<td [contentEditable]="isEditable && enableEditIndex === i" ...