Angular input disable or enable - html

Question

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

Answer 1

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>

Answer 2

public toggleInputs = {};
enable(index: number) {
this.toggleInputs[index] = true;
}
disable(index: number){
this.toggleInputs[index] = false;
}
<td mat-cell *matCellDef="let element; let i = index" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" class="align-right">
<input type="text" [disabled]="!toggleInputs[i]" placeholder="{{ element.value }}" value="{{ element.value }}" />