Angular 2 - Edit table rows inline, then save the new data

Question

I am trying to make a component that shows data in rows from TableData model,

export class TableData{
    constructor(
        public id: number,
        public          


        

Answer 1

Juts pass id as flag along with your id then detect as per id clicked on the row of table here is example -

tableData: TableData[] = [
        new TableData('Canada','Ottawa',1),
        new TableData('USA','Washington DC',2),
        new TableData('Australia','Canberra',3),
        new TableData('UK','London',4)
        ];

• PS - your code is throwing error here please correct here.

  working demo here Plunker example

  Update - Try using (input) event binding on the td and get the updated text using event.target.outerText . please check update plnukr.

  
    {{ row.country }}
    {{ row.capital }}
  
  
  onRowClick(event, id){
      console.log(event.target.outerText, id);
    }