I have a table where data is populating. Each row has an edit link. I want to edit only a particular row on click of edit link. Right now its' showing edit option for all the rows.
Also I want to show the text in a input box on click of edit.
Here is my code.
<tr *ngFor="let row of backendData.report" class="hover-highlight">
<td class="benchmark_name">
{{row.name}}
</td>
<td>
{{row.value}}
</td>
<td>
{{row.description}}
</td>
<td>
<button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
<button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
<a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true">
<i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"></i>
</a>
</td>
<td>
</td>
</tr>
My current output looks like this
In-line editing lets you make quick changes without going to a new page. You can change daily budgets, ads, keywords, placements, and bids. If a cell is editable it will show a pencil icon. Click the cell to edit its value.
In first function that is edit_row() function is used to edit rows. In this function we get row id in 'no' variable and then we hide and edit button and display the save button then we get all the data of edit row and insert the textbox with data in edit row to make rows editable.
Here is the solution
html
<tr *ngFor="let row of backendData; index as i;" class="hover-highlight">
<td class="benchmark_name">
{{row.name}}
</td>
<td>
{{row.value}}
</td>
<td>
{{row.description}}
</td>
<td>
<button *ngIf="enableEdit && enableEditIndex == i" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
<button *ngIf="enableEdit && enableEditIndex == i" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
<a href="#" class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEditMethod($event, i)">
edit
</a>
</td>
<td>
</td>
</tr>
ts file
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
enableEdit = false;
enableEditIndex = null;
backendData = [{
"name": 'Target',
"value": '100',
"description": 'abc'
},
{
"name": 'Size',
"value": '20',
"description": 'def'
},
{
"name": 'Industry',
"value": '40',
"description": 'ghi'
}]
enableEditMethod(e, i) {
this.enableEdit = true;
this.enableEditIndex = i;
console.log(i, e);
}
}
Working Demo
Let me know if you have any doubt.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With