I am trying to implement inline editing for a table in my application. The requirement is to hide the "Edit" and "Delete" buttons for all other rows when the user clicks on the edit button of a particular row. I have attempted to achieve this using the current index, but it didn't work as expected. The same behavior should apply when the user clicks on the addNew button.
<a (click)="addNew()" class="mb-1 ml-1">Add New</a>
<table class="row-border table-bordered-no-confilct border-1 table">
<thead>
<tr>
<th *ngFor="let head of headers">
{{ head.name }} <span class="text-danger" *ngIf="head.required">*</span>
</th>
</tr>
</thead>
<tr *ngFor="let tableData of data; let i = index">
<td>
<div *ngIf="i">
<i
class="ace-icon fa fa-pencil-square-o bigger-150 text-success"
data-toggle="tooltip"
title="Edit"
*ngIf="!tableData.isEditable"
(click)="onEdit(tableData)"
></i>
<i
class="ace-icon fa fa-trash-o bigger text-danger ml-1"
data-toggle="tooltip"
title="Delete"
*ngIf="!tableData.isEditable"
(click)="onDelete(tableData)"
></i>
</div>
<i
class="ace-icon fa fa-floppy-o bigger-150 text-success"
data-toggle="tooltip"
title="Save"
*ngIf="tableData.isEditable"
(click)="onSave(tableData)"
></i>
<i
class="ace-icon fa fa-times bigger-150 text-danger ml-1"
data-toggle="tooltip"
title="Cancel"
*ngIf="tableData.isEditable"
(click)="cancel(tableData, i)"
></i>
</td>
<td>{{ i + 1 }}</td>
<ng-container *ngIf="tableData.isEditable; else viewable">
<ng-container *ngFor="let head of headers">
<ng-container *ngIf="head.mappedProperty">
<td>
<input
*ngIf="
head.dataType === 'text' ||
head.dataType === 'number' ||
head.dataType === 'checkbox'
"
[type]="head.dataType"
[(ngModel)]="tableData[head.mappedProperty]"
[checked]="tableData[head.mappedProperty]"
/>
</td>
</ng-container>
</ng-container>
</ng-container>
<ng-template #viewable>
<ng-container *ngFor="let head of headers">
<ng-container *ngIf="head.mappedProperty">
<td>{{ tableData[head.mappedProperty] }}</td>
</ng-container>
</ng-container>
</ng-template>
</tr>
</table>
ts
onEdit(data): void {
this.isNew = false;
this.copyOfOriginalData = { ...data };
this.data.map((item) => {
item.isEditable = data.id === item.id;
});
}