Angular 2, get edited data from HTML table Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Angular 2, get edited data from HTML table without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Our angular 2 application has a html table, that displays data from the database. Now we need to make few items editable in the table. I have made the needed items editable and added the button update, when clicked on the update button I need to get the edited value of the row along with the id of the row.

Please help me how to achieve it. Given below is my code.

        <tr  *ngFor="let row of tableData;">
        <td >{{ row.id}}</td>                   
        <td contenteditable="true">{{ row.editableData1 }}</td>
        <td contenteditable="true">{{ row.editableData2}}</td>
        <td style="color: black;">{{ row.user }}</td>
        <td class="link">
        <button  (click)="updatetoDB()" type="button">&nbsp;&nbsp;Update&nbsp;&nbsp;</button>
        </td>
    </tr>

So When user clicks on the Update Button, I need to get the edited data and the id of the row. Thank you in Advance 🙂

Answer

#data1 method maybe not work because td element does not have value attribute.

Can you try to add an input element into your td like this :

<tr  *ngFor="let row of tableData;">
    <td >{{ row.id}}</td>                   
    <td contenteditable="true"><input type="text" [value]="row.editableData1" #data1/></td>
    <td contenteditable="true"><input type="text" [value]="row.editableData2" #data2/></td>
    <td style="color: black;">{{ row.user }}</td>
    <td class="link">
    <button  (click)="updatetoDB(data1, data2, row.id)" type="button">Update</button>
        </td>
</tr>

I think it should be working, but you habe to include an input element into your td. It’s annoying ?

We are here to answer your question about Angular 2, get edited data from HTML table - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji