CODEWITHSUNDEEP
javascripthtmlangularangular5
sandeep
sandeep

Reputation: 3345

Edit table row inline on click of edit in Angular

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

enter image description here

enter image description here

Upvotes: 7

Views: 46398

Answers (3)

Piyush Jain
Piyush Jain

Reputation: 1986

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.

Upvotes: 14

Sanjeev_gupta2812
Sanjeev_gupta2812

Reputation: 236

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.

Upvotes: 0

Sufyan Shaikh
Sufyan Shaikh

Reputation: 96

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.

Upvotes: 0

Related Questions