Whenever the edit button is clicked, the input box does not open. After clicking on the edit option and then clicking on another input box, it will be changed to an input box. I want the input box to change when the edit option is clicked.
<form class="form-add-expenses" (submit)="addItem($event)">
<div class="row">
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemName" placeholder="Item Name" name="name">
</div>
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemType" placeholder="Item Type" name="type">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemDescription" placeholder="Item Description" name="description">
</div>
<div class="col-sm-2">
<input type="text" class="form-control" [(ngModel)]="masterItem.itemCurrentPrice" placeholder="Item Price" name="price">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-md">add</button>
</div>
</div>
</form>
<table class="table-responsive table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Price</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i=index">
<td><!-- {{ item.itemName }} -->
<span *ngIf="i !== indexes">{{ item.itemName }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemName" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemType }} -->
<span *ngIf="i !== indexes">{{ item.itemType }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemType" name="update.type" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemDescription }} -->
<span *ngIf="i !== indexes">{{ item.itemDescription }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemDescription" name="update.description" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td><!-- {{ item.itemCurrentPrice }} -->
<span *ngIf="i !== indexes">{{ item.itemCurrentPrice }}</span>
<span *ngIf="i === indexes"><input type="text" class="form-control" [(ngModel)]="editUpdate.itemCurrentPrice" name="update.price" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
</td>
<td>
<span *ngIf="i !== indexes"><i class="fa fa-pencil" (click)="editItem(i)" aria-hidden="true"></i></span>
<span *ngIf="i === indexes"><button (click)="UpdateItem()" class="btn btn-md">Update</button></span>
</td>
<td><i class="fa fa-trash" (click)="deleteItem(i)" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
My TypeScript file is:
editItem(i: number) {
this.indexes = i;
this.editUpdate = this.items[this.indexes];
console.log("edit",this.editUpdate);
}