Inline text editing of Mat table-Edit icon not getting refreshed

Question

I am trying to do inline Editing for mat table . I am following the link https://stackblitz.com/edit/angular-custom-pagination-mat-table?file=src%2Fmain.ts here In page 1 I am editing the second row ( the edit symbol icon changed) without saving the changes I am moving to next page. In the next page, the second row showing like save icon (which was appeared on page 1).

Page 1, 2nd Row:

Page 2, 2nd Row:

I tried to update the index column with pagination, but it is not working. {{this.paginator.pageIndex * this.paginator.pageSize + i}}.

<ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td
            mat-cell
            *matCellDef="let element; let i = index"
            [formGroup]="element"
          >
            <!-- <span [hidden]="VOForm.get('VORows').value[i].isEditable"> -->
            <mat-form-field
              style="width: 70px"
              [appearance]="VOForm.get('VORows').value[i].isEditable? 'none' : 'legacy'"
            >
              <input
                matInput
                type="text"
                formControlName="name"
                [readonly]="VOForm.get('VORows').value[i].isEditable"
              />
            </mat-form-field>
            <!-- </span> -->
          </td>
        </ng-container>

let i=dataIndex is not working.

Kindly share the working solution,as this stackblitz link is the exactly the same thing I requires.

Answer 1

To get the current editing index, we can use the below logic to do the same, updated on the same stackblitz!

const foundIndex = (
  this.VOForm.get('VORows') as FormArray
).controls.findIndex((item: any) => item === element);
if (foundIndex > -1) {
  alert(foundIndex);
}

---

We can use the below code to trigger the isEditable control to be set to true for all form array rows! during the pagination change event!

...
this.paginator.page.subscribe(() => {
  (this.VOForm.get('VORows') as FormArray).controls.forEach((row) => {
    console.log(row);
    row.get('isEditable').patchValue(true);
  });
  ...

stackblitz

We need to do the same logic on select of page, doing a filter, adding a new row, all other subsequent events!