Edit table row inline on click of edit in Angular

Question

I have a table where data is populating. Each row has an edit link. I want to edit only a particular row on click of edit link. Right now its' showing edit option for all the rows.

Also I want to show the text in a input box on click of edit.

Here is my code.

<tr *ngFor="let row of backendData.report"  class="hover-highlight">

          <td class="benchmark_name">
             {{row.name}}
          </td>
          <td>
            {{row.value}}
          </td>
          <td>
            {{row.description}}
          </td>
          <td>
              <button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
              <button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
              <a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true">
          <i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"></i>
        </a>
          </td>
          <td>

          </td>
        </tr>

My current output looks like this

I supouse you can simplifly, but this netbasal.com/… is an amazzing article about this — Eliseo
– Eliseo, Commented Aug 8, 2019 at 9:58

Sohail Anwar · Accepted Answer · 2023-07-03 09:51:10Z

Here is the solution

html

<tr *ngFor="let row of backendData; index as i;"  class="hover-highlight">

          <td class="benchmark_name">
             {{row.name}}
          </td>
          <td>
            {{row.value}}
          </td>
          <td>
            {{row.description}}
          </td>
          <td>
              <button *ngIf="enableEdit && enableEditIndex == i" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
              <button *ngIf="enableEdit && enableEditIndex == i" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
              <a href="#" class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEditMethod($event, i)">
                edit
        </a>
          </td>
          <td>

          </td>
        </tr>

ts file

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  enableEdit = false;
  enableEditIndex = null;
  backendData = [{
    "name": 'Target',
    "value": '100',
    "description": 'abc'
  },
  {
    "name": 'Size',
    "value": '20',
    "description": 'def'
  },
  {
    "name": 'Industry',
    "value": '40',
    "description": 'ghi'
  }]

  enableEditMethod(e, i) {
    this.enableEdit = true;
    this.enableEditIndex = i;
    console.log(i, e);
  }
}

Let me know if you have any doubt.

Awesome.. 😎 This works. As I have asked in my main question how can I show the value and description in an editable box on click of edit button. And on click of save/cancel it should hide again. (On save of course it will call the backend API)
Hey Piyush... one more thing. On click of edit, it should show the buttons for that row and hide the edit link for that row only. But in this case onclick of edit link its showing save/cancel button for that row, but also hiding the edit link for other rows.
Hi @piyushjain your stackblitz link is broken can you please fix it, it will be helpful for me. Thanks :)
@PiyushJain Hi stackblitz.com/edit/angular-wq8vru this link is not working.

Sufyan Shaikh · Accepted Answer · 2019-08-08 09:59:46Z

0

You have to create an index in loop

Then create an array of enableEdit of length i.

Then on click event, write a function which takes a parameter index i.

answered Aug 8, 2019 at 9:59

Sufyan Shaikh

961 silver badge6 bronze badges

Comments

Sanjeev_gupta2812 · Accepted Answer · 2019-08-08 10:03:46Z

0

What you can do is set the "contenteditable" property of the row set to "true". For example :

By default HTML keeps this to false.

You can get the current index of the table row using either by "trackBy" in *ngFor

*ngFor="let post of posts;trackBy:post?.id"

or you can use this keyword for the current index.

While saving or cancel just make the td's contenteditable to false.

answered Aug 8, 2019 at 10:03

Sanjeev_gupta2812

2544 silver badges20 bronze badges

Collectives™ on Stack Overflow

Edit table row inline on click of edit in Angular

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related