updating a row in a table in angular 2

Question

Hi I'm working on the angular 2 inserting updating and deleting a row in angular 2. In ngFor I am binding the data to the table. I had created the update button in the ngFor loop.

On click of the particular rows "Update" button, I needs only that row to get with textboxes instead of all rows. Unfortunately i'm getting for all records. I knew its because of the property binded to all rows. But how can I overcome to make sure that only particlular clicked row to get with edit mode like text boxes. My code was like below :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public enableEdit = true;

  showcreate: boolean=false;
  public items=[];
  public FirstName="";
  public LastName="";
  public MobileNumber="";
  public PinCode="";
  public City=""; 
  public CollageName="";        
  public Percent=""; 
  public conformdelete;
  public edit = false;
  public btncreate =false;
  public indexVal:any;
      constructor(){
        if(localStorage.getItem("items"))
        this.items = JSON.parse(localStorage.getItem("items"))
       }

  delete(index){    
    if(confirm("Are you sure you want to delete this item?") == true){
      this.items.splice(index,1);
      localStorage.setItem("items",JSON.stringify(this.items))
     }
  }
  update(event, index){
    debugger;
    console.log(event);
    console.log(index);
    this.enableEdit = false;
  }
  save(index){
    // console.log("save",i)
    // this.indexVal = i;
    this.enableEdit = true;

  }
  cancel(){

        this.enableEdit = true;
  }

  btnsubmit(){
    this.items.push({
      "FirstName":this.FirstName,
      "LastName":this.LastName,
      "MobileNumber":this.MobileNumber,
      "PinCode":this.PinCode,
      "City":this.City, 
      "CollageName":this.CollageName,                 
       "Percent":this.Percent         

     })
     localStorage.setItem("items",JSON.stringify(this.items))

       }

      }

app.component.html :

<table border="2">
  <thead>
    <tr>
    <th>FirstName</th>
    <th>LastName</th>
    <th>MobileNumber</th>
    <th>PinCode</th>
    <th>City</th>
    <th>CollageName</th>            
    <th>Percent</th>
    <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of items; let index = index">
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.FirstName"> <span *ngIf="enableEdit">{{i.FirstName}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.LastName"> <span *ngIf="enableEdit">{{i.LastName}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.MobileNumber"> <span *ngIf="enableEdit">{{i.MobileNumber}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.PinCode"> <span *ngIf="enableEdit">{{i.PinCode}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.City"> <span *ngIf="enableEdit">{{i.City}}</span></td>        

      <td><input *ngIf="!enableEdit" [(ngModel)]="i.CollageName"> <span *ngIf="enableEdit">{{i.CollageName}}</span></td>                 
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.Percent"> <span *ngIf="enableEdit">{{i.Percent}}</span></td> 
      <td>
        <button *ngIf="enableEdit" (click)="delete(index)">Delete</button>
        <button *ngIf="enableEdit" (click)="update($event,index)" class="update">Update</button>
        <button *ngIf="!enableEdit" (click)="save(index)">save</button>
        <button *ngIf="!enableEdit" (click)="cancel(index)" >cancle</button>
    </td>
    </tr>
  </tbody>
</table>

Answer 1

The issue is, when one of your row button is clicked, since the "enableEdit" condition is universal for all rows, it gets reflected to all rows. One of the possible solution is to add an extra key-value pair to your table array, so that you can make use of each row , by using its index.

Example :

in your component.ts,

constructor(){
        if(localStorage.getItem("items"))
        this.items = JSON.parse(localStorage.getItem("items"));

        /* add an extra key value pair named "edit", and initially set it to false. So all the rows will be showing "Delete" and "Update" buttons initially */
        this.items.forEach(function (eachItem){ 
          eachItem.edit = false;
        });
       }


       /* function for update or cancel functionalities */
       updateCancel(event, index,action:string){
         this.items[index].edit = true; /* selects the items with index number and swaps the buttons*/

         if(action == "cancel"){
           this.items[index].edit = false;
         }
       }

       /* function for save or delete functionalities */
       saveDelete(index, action:string){
         this.items[index].edit = false;

         if(action == "delete"){
           if(confirm("Are you sure you want to delete this item?") == true)
          {
            this.items.splice(index,1);
            this.items[index].edit = true;
            localStorage.setItem("items",JSON.stringify(this.items))
         }
       }

    }

In your app.component.html file, change the button area td with new function names and if condition

   <td>
        <button *ngIf="!i.edit" (click)="saveDelete(index,'delete')">Delete</button>
        <button *ngIf="!i.edit" (click)="updateCancel($event,index,'update')" class="update">Update</button>
        <button *ngIf="i.edit" (click)="saveDelete(index,'save')">Save</button>
        <button *ngIf="i.edit" (click)="updateCancel($event,index,'cancel')">cancel</button>
      </td>

This solution worked for me. Thanks.