Angular input disable or enable

Issue

I want the behavior of my form to be like this, when I click on the modify button, I want this line only to be modified, but when I click on it, all three lines are active How to do that?

pictures : edit save

app.component.html :

<table mat-table [dataSource]="dataSources[i]" class="mat-elevation-z0">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipClass="tooltip" matTooltipPosition="right">{{ element.name | summary: 20 }}</td>
  </ng-container>
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef class="align-right">Valeur</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" class="align-right">
        <input type="text" [disabled]='toggleButton' placeholder="{{ element.value }}" value="{{ element.value }}" >
        <button mat-icon-button title="Modifier" (click)="enable()" *ngIf="toggleButton"><mat-icon>editer</mat-icon></button>
        <button mat-icon-button title="Enregistrer" *ngIf="!toggleButton"><mat-icon>done</mat-icon></button>
        <button mat-icon-button title="Annuler" (click)="disable()" *ngIf="!toggleButton"><mat-icon>clear</mat-icon></button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="['name', 'value']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
</table>

app.component.ts :

public toggleButton: boolean = true;
enable() {
  this.toggleButton = false;
}
disable(){
  this.toggleButton = true;
}

Solution

You can send in the dataSource a property toggleButton, i.e. element.toggleButton, then:

<td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" class="align-right">
    <input type="text" [disabled]="element.toggleButton" placeholder="{{ element.value }}" value="{{ element.value }}" >
    <button mat-icon-button title="Modifier" (click)="element.toggleButton = !element.toggleButton" *ngIf="element.toggleButton"><mat-icon>editer</mat-icon></button>
    <button mat-icon-button title="Enregistrer" *ngIf="!element.toggleButton"><mat-icon>done</mat-icon></button>
    <button mat-icon-button title="Annuler" (click)="element.toggleButton = !element.toggleButton" *ngIf="!element.toggleButton"><mat-icon>clear</mat-icon></button>
</td>

Answered By - Juan Trejos