Question

50

Edit table row inline on click of edit in Angular

rated 0 times [ 55] [ 5] / answers: 1 / hits: 42040 / 5 Years ago, thu, august 8, 2019, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

krystadesiraeo

Add To Favorites

Follow

Total Points: 493

Total Questions: 93

Total Answers: 100

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

answered 5 Years ago bryantc · Accepted Answer

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);

  }

}

Working Demo

Let me know if you have any doubt.