4

Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982

enter image description here

Flash
  • 924
  • 3
  • 22
  • 44

2 Answers2

7

The git hub issue you mentioned has a few implementations people have come up with.

You can get inspiration from this:

https://stackblitz.com/edit/material2-beta12-es19ub?file=app%2Fapp.component.html

or this: https://stackblitz.com/edit/angular-g5u7cy?file=app%2Ftable-editing-example.html

I would go through the github issue to see the different options people have come up with.

abann sunny
  • 928
  • 12
  • 15
4

inside your matColumnDef you should have a <th></th> and a <td></td>, simply add input to the <td></td> with reactive forms.

if you wish it to be practically the same as the material example, you could create a position absolute element inside a positioned-relative element inside the that would propmt on click, receive and input, and close after some logic, to update the formControl.

Still, you'd need formControls, and to edit the matColumnDef.

example taken from the link of the github request

      <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef> time </th>
        <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i"> 
            <input type="text" formControlName="time" placeholder="Time"> 
        </td>
      </ng-container>
Francisco Santorelli
  • 1,243
  • 8
  • 13
  • Sorry I was being a little to generic. I get that part but how do you make it editable and savable. Like when you are editing the input displays but when your done it just shows the comment – Flash Mar 20 '19 at 18:59
  • 1
    you could add `(keydown.enter)="onUpdate()"` to update on enter in the input... or add (keyup) if you want editting as you type, or (blur) to edit on focus-lose, or (change) to edit on input change... etc... try this and tell me if it works! edit: onUpdate() should call `formControl.setValue()` and it should get the input directly from the DOM or from the formcontrol. Either way is fine – Francisco Santorelli Mar 20 '19 at 19:06
  • Thanks I will git it a try. Do you have a working example like on stackblitz? – Flash Mar 20 '19 at 19:08
  • sadly my working examples are on work-related projects, which I don't have at hand and cannot share publicly (I would share just the important parts though)... – Francisco Santorelli Mar 20 '19 at 19:09
  • Here is the working example https://medium.com/@nsrathore/editable-mat-table-in-angular-7-b46578345b3a – kushal Baldev Jul 09 '20 at 20:22