Edit Table Row Inline on Click of Edit in Angular

Edit table row inline on click of edit in Angular

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.

How can i edit specific row in table using angular5?

What I would do is set a property on each row to indicate if it's being edited as shown below:

https://stackblitz.com/edit/angular-usbhmd

The code for people that do not want to click that.

Html

<table class="table table-hover">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Registered Date</th>
      <th>Action</th>
    </tr>
    <tr *ngFor="let domain of domains; let i = index">
      <td>
        <span *ngIf="!domain.editable">{{domain.name}}</span>
        <input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="domain.editable"/>
      </td>
      <td>
        <span *ngIf="!domain.editable">{{domain.reg_date}}</span>
         <input type="date" class="form-control" [(ngModel)]="domain.reg_date" *ngIf="domain.editable"/>
      </td>
      <td><button class="btn btn-primary" (click)="editDomain(domain)">Edit</button></td>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Component

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  domains = [];
  isVisible : boolean = false;
  constructor(){
      this.domains = [
    {
      "_id" : "12323vdfvd234",
      "name" : "sixlogs.com",
      "reg_date" : "2018-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "avanza.com",
      "reg_date" : "2019-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "tps.com",
      "reg_date" : "2018-04-04",
      "editable": false
    },
    {
      "_id" : "12323vdfvd234",
      "name" : "utf.com",
      "reg_date" : "2019-04-04",
      "editable": false
    }
  ]
}

editDomain(domain: any){
    domain.editable = !domain.editable;
  }
}

As you can see I have added the editable property to the domains array, that gets set for the object when the editDomain get's triggered by the button click
event. With the editable property you can then changed your view to display inputs for each row.

Angular 2 - Edit table rows inline, then save the new data

Juts pass id as flag along with your id then detect as per id clicked on the row of table here is example -

tableData: TableData[] = [
        new TableData('Canada','Ottawa',1),
        new TableData('USA','Washington DC',2),
        new TableData('Australia','Canberra',3),
        new TableData('UK','London',4)
        ];

• PS - your code is throwing error here please correct here.

  <tr *ngFor="#row of tableData>

should be changed with

<tr *ngFor="#row of tableData">

working demo here
Plunker example

Update -
Try using (input) event binding on the td and get the updated text using event.target.outerText . please check update plnukr.

<tr *ngFor="#row of tableData">
  <td contenteditable='true' (input)="onRowClick($event, row.id)">{{ row.country }}</td>
  <td contenteditable='true'>{{ row.capital }}</td>
</tr>

onRowClick(event, id){
    console.log(event.target.outerText, id);
  }

Angular inline edit table singleton

I was able to get the desired result by updating the editContact and reset functions to the following:

$scope.editContact = function(contact, event) {
  // Nothing first time, but will have an element second time
  $timeout(function() {
    // Click the element and remove the class since it is not in edit mode anymore
    angular.element('.row-edit-mode').triggerHandler('click');
    angular.element('.row-edit-mode').removeClass('row-edit-mode');

    // If it is not a button, then it is the fa-icon, so get its parent, which is a button
    var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode;
    // Find it's sibling with given id, and add a class to it
    angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode')

    $scope.model.selected = angular.copy(contact);
  });
};

$scope.reset = function() {
  // Remove class on cancel
  angular.element('.row-edit-mode').removeClass('row-edit-mode');
  $scope.model.selected = {};
};

http://plnkr.co/edit/vAACyxv2bE0li5muefsQ?p=preview

I still see a slight flicker between the switch, so if anyone has suggestions to make it more smoother, I'll really appreciate it.

If I don't see other answers which achieve the desired result for a couple days, I will markthis answer as accepted. Thank you all who offered help!

How to edit particular row inline edit using Angular8

Try with the following changes in html

<ng-container *ngFor="let contact of yearManagement">
      <tr>
        <td></td>
        <td class="text-capitalize">
          <ng-container *ngIf="editableRow !== contact.id; else newDeb">
            {{contact.policyTypeName}}
          </ng-container>
          <ng-template #newDeb>
            <input [(ngModel)]="contact.policyTypeName" />
          </ng-template>
        </td>
        <td>{{contact.quotes}}</td>
        <td>{{contact.policyCT}}</td>
        <td>{{contact.writtenPremium }}</td>
        <td class="width125">
          <button class="btn btn-outline-primary btn-table ml-1" title="Edit"
          (click)="editableRow = contact.id">Edit</button>
          <button class="btn btn-outline-primary btn-table ml-1" title="Delete"
                      (click)="deleteCommitment(contact)">Delete</button>
        </td>
      </tr>
    </ng-container>

And in typescript

export class AppComponent {
  editableRow = 0;

Angularjs Inline Edit row not working

From what limited data and code you have provided in your question, I have put together a basic PLUNKER which gives you the edit and save functionality in line in a table cell.

The idea is to attach the edit flag (it's better if it's a boolean rather than a string) to each element in the array so we can track which row should be editable. If you set it to scope and use it like you have shown in the code, it will be applied to all rows and all of them will be editable even if your intent was for a single row.

#script.js
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.Value = [{
   id: 1,
   question: 'question 1',
   name: 'name 1'
}, {
   id: 2,
   question: 'question 2',
   name: 'name 2'
  }, {
   id: 3,
   question: 'question 3',
   name: 'name 3'
  }]
$scope.editUtterance = function(data) {
  alert(data.id);
  data.edit = true;
  console.log(data.edit);
}
$scope.save = function(data) {
   data.edit = false;
}
});

how to make selected row editable on click of edit button In angular 4

You should add a property to your rowData, such as editable.
Then layout your code like this:

<tbody>
        <tr *ngFor='let row of rowData' [ngClass]="{ 'selected': row.selected }">
          <td class="text-center>
              <input type="checkbox" [(ngModel)]="row.selected" />
          </td>
          <td>
             <input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
             <ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
             <!-- You can use span or whatever instead of ng-container-->
          </td>
          <!-- Repeat for other cells -->      
        </tr>
      </tbody>

For the select all part, I assume you have checkbox in the thead. It needs to have this code:

<td><input type="checkbox" (change)="selectAll($event)" /></td>

Then in your component:

    selectAll(event) {
        if (event.target.checked) {
            this.rowData = this.rowData.map((row) => {
               row.selected = true;
               return row;
            });
        } else {
            this.rowData = this.rowData.map((row) => {
               row.selected = false;
               return row;
            });
        }
    }

Then you must have an edit button above table that takes all selected rows and makes them editable.

makeEditable() {
  this.rowData = this.rowData.map((row) => {
     if (row.selected) { row.editable = true; }
     else { row.editable = false; }
     return row;
  });
}

Call this on edit button click.

Angular - Material Table, is it possible to edit rows by clicking a button?

This answer is not specific to mat-table, but try using PrimeNG for editable tables.

https://www.primefaces.org/primeng/#/table/edit

---

Related Topics