CODEWITHSUNDEEP
angular
Mantas
Mantas

Reputation: 85

Edit values inside a table

What I want to achieve is to edit data directly in the table. Here is how the current table is displayed: enter image description here

How do I bring up input fields on the specific row that the user has clicked "Edit" on? And use those values in my component?

<tbody>
  <tr *ngFor="let option of allParts | searchFilter: searchText">
  <td>{{option.id}}</td>
  <td>{{option.Name}}</td>
  <td>{{option.Category}}</td>
  <td>{{option.Number}}</td>
  <td>
    <button type="button" class="btn btn-info" i18n="Admin-Parts-Modal-Table-EditButton">Edit</button>
  </td>
  <td>
    <button type="button" class="btn btn-danger" i18n="Admin-Parts-Modal-Table-DeleteButton">Delete</button>
  </td>
  </tr>
</tbody>

EDIT - Found an example of what I'm going for, although it's in angularJS I'll do my best to make it work - http://plnkr.co/edit/UiehdgaAPmuCdZYbWnMu?p=preview&preview

Upvotes: 0

Views: 1390

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

firstly u need to use input if you want to edit and as second your array object needs one more property which controls if editable. As starting point you can do then u need to change edit and cancel save button related to this property. If category is list then use dropdown rather than input text etc..

<tbody>
  <tr *ngFor="let option of allParts | searchFilter: searchText">
  <td> <input [attr.disabled]="option.disabled ? '' : null" type="text" [value]="option.id" /></td>
  <td> <input [attr.disabled]="option.disabled ? '' : null" type="text" [value]="option.Name" /></td>
  <td>{{option.Category}}</td>
  <td> <input [attr.disabled]="option.disabled ? '' : null" type="text" [value]="option.Number" /></td>
  <td>
    <button type="button"(click)="option.disabled=true" class="btn btn-info" i18n="Admin-Parts-Modal-Table-EditButton">Edit</button>
  </td>
  <td>
    <button type="button" class="btn btn-danger" i18n="Admin-Parts-Modal-Table-DeleteButton">Delete</button>
  </td>
  </tr>
</tbody>

Upvotes: 1

Piva Gregory
Piva Gregory

Reputation: 502

You can insert directly input into your td :

<td>
  <input type="text" [value]="option.id" />
</td>

Button can switch edit mode with disabled attribut, and in css, custom input with no border and background transparent.

Upvotes: 1

Related Questions