How can i edit specific row in table using angular5?

Question

I have a table in my component having multiple records. I want to edit specific row on click edit button in table. But when it is make all rows editable.

I have my table like this

I have a table in which there are multiple rows. When i click on edit button within table so it make all rows of the table editable. Here is my code at stackblitz

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

When i click on edit button so it make all rows editable.

I want only clicked row editable. How can i do it?

Jamie Rees · Accepted Answer · 2019-01-09 16:12:53Z

4

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.

answered Jan 9, 2019 at 16:12

Jamie Rees

8,1832 gold badges51 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fahad Subzwari Over a year ago

I don't want to add additional key. So what's the solution then?

Fahad Subzwari Over a year ago

Thanx for help. I have done it without adding any key :)

Jamie Rees Over a year ago

How did you do it?

Fahad Subzwari Over a year ago

By putting condition *ngIf="domain._id === editId". and on edit i set editId = domain._id

Safnas · Accepted Answer · 2020-12-19 08:57:00Z

1

use index of the row

editable attribute in data won't be available generally

https://angular-ivy-dfeleo.stackblitz.io

https://stackblitz.com/edit/angular-ivy-dfeleo?devtoolsheight=33&file=src/app/app.component.html

answered Dec 19, 2020 at 8:57

Safnas

1532 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can i edit specific row in table using angular5?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related