CODEWITHSUNDEEP
typescriptangular5edit-tableview
Fahad Subzwari
Fahad Subzwari

Reputation: 2325

How can i edit specific row in table using angular5?

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?

Upvotes: 0

Views: 8593

Answers (2)

Safnas
Safnas

Reputation: 153

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

Upvotes: 1

Jamie Rees
Jamie Rees

Reputation: 8183

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.

Upvotes: 4

Related Questions