Angular Material - editing value of mat-cell

Question

I have data presented in table using Angular 9 Mat Table

I iterate through dataSource elements iot get columns dynamically.

When I click on specified cell there is previous value in edit cell.

WHAT I WANT Edit selected cell and upgrade this value after I typed another value.

repository: https://stackblitz.com/edit/angular-editable-mat-cell-columns-iteratable-over-datasource

try using (change)='changeHandler(element)' on the input, and in the change handler you can modify property calculation — Hassan Al Bourji, Aug 12 '20 at 14:17

score 1 · Answer 1 · answered Aug 18 '20 at 10:09

This is very simple solution, only You need find how to hide and show input between edit

<ng-container matColumnDef="calculation">
    <th mat-header-cell *matHeaderCellDef> Calculation </th>
    <td mat-cell *matCellDef="let element, let i = index"> 
      <ng-container *ngIf="element.position!==editRowId">
      <span (click)="edit(element.position, 'calculation')"> Edit </span>
       <span>Value calculated is: {{element.weight * inp.value}}</span>
      </ng-container>
      <ng-container>
        <span (click)="edit(element.position, 'calculation')"> End </span>
      <input matInput #inp name="calculation" value="0" (blur)="editRowId=-1"> 
      </ng-container>
      </td>
  </ng-container>

this is result

Angular Material - editing value of mat-cell

1 Answers1