Angular mat table enable/disable row based on button click

Question

I am trying to build an inline editable table using mat-table. But I am not able to enable/disable each row separately based on each row's button click. Currently if I click one edit button, whole textfields in the table are enabled/disabled.

Could you help me to solve this issue?

In app.component.html

<mat-table #table [dataSource]="dataSource">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>
      <h6><b> Name </b></h6>
    </mat-header-cell>
                            
    <mat-cell *matCellDef="let member">
      <input
        [disabled]='disableTextbox'
        type="text"
        class="form-control"
        [value]="member.name"
      >
    </mat-cell>
  </ng-container>
  
  <!-- Action Column -->
  <ng-container matColumnDef="action">
    <mat-header-cell *matHeaderCellDef>
      <h6><b> Action </b></h6>
    </mat-header-cell>
                            
    <mat-cell *matCellDef="let member">
      <a (click)="edit($event)"> 
        <i class="fa fa-edit" style="font-size:20px;color: #673ab7"</i>
      </a>
    </mat-cell>
  </ng-container>
                        
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

In app.component.ts

edit(event){
  this.disableTextbox = !this.disableTextbox;
}

Answer 1

Please try this code. It's working fine.

In app.component.html

<mat-table #table [dataSource]="dataSource">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>
      <h6><b> Name </b></h6>
    </mat-header-cell>
                            
    <mat-cell *matCellDef="let member">
      <input
        [disabled]=member.disableTextbox
        type="text"
        class="form-control"
        [value]="member.name"
      >
    </mat-cell>
  </ng-container>

  <!-- Action Column -->
  <ng-container matColumnDef="action">
    <mat-header-cell *matHeaderCellDef>
      <h6><b> Action </b></h6>
    </mat-header-cell>

    <mat-cell *matCellDef="let member">
      <button value="≈" (click)="edit($event,member)"> 
        disableTextbox
      </button> 
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

In app.componet.ts

edit(event,selMember){
  selMember.disableTextbox = !selMember.disableTextbox;
}