Angular input disable or enable

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

the toggle property is common for all lines as initialized at the component level. You need to add a toggle property to the data of each line, like element.toggle — Gérôme Grignon
– Gérôme Grignon, Commented Jul 29, 2022 at 9:07
use *matCellDef="let element; let i = index;" and maintain an variable editRow: number | null. Instead of *ngIf="toggleButton" you'll have *ngIf="editRow == i" — Andrew Allen
– Andrew Allen, Commented Jul 29, 2022 at 9:08

Juan Trejos · Accepted Answer · 2022-07-29 09:25:31Z

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>

answered Jul 29, 2022 at 9:25

Juan Trejos

1216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

di22 · Accepted Answer · 2022-07-29 11:00:14Z

0

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 }}" />

answered Jul 29, 2022 at 11:00

di22

361 silver badge4 bronze badges

Collectives™ on Stack Overflow

Angular input disable or enable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related