title: Angular 2 - Edit table rows inline, then save the new data
body: <p>I am trying to make a component that shows data in rows from TableData model,</p>
  
  <pre><code>export class TableData{
      constructor(
          public id: number,
          public country: string,
          public capital: string){ }
  }
  </code></pre>
  
  <p>I have my data in the component like this,</p>
  
  <pre><code>tableData: TableData[] = [
          new TableData(1, 'Canada','Ottawa'),
          new TableData(2, 'USA','Washington DC'),
          new TableData(3, 'Australia','Canberra'),
          new TableData(4, 'UK','London')
          ];
  </code></pre>
  
  <p>Then in my component, I am creating a table like this,</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
       &lt;tr *ngFor="#row of tableData&gt;
          &lt;td contenteditable='true'&gt;{{ row.id }}&lt;/td&gt;
          &lt;td contenteditable='true' (click)="onRowClick($event)"&gt;{{ row.country }}&lt;/td&gt;
          &lt;td contenteditable='true'&gt;{{ row.capital }}&lt;/td&gt;
       &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;span&gt;{{ tableData | json }}&lt;/span&gt;
  &lt;/table&gt;
  
  onRowClick(event){
  console.log(event);
  }
  </code></pre>
  
  <p>I am able to edit the data as I marked the <code>&lt;td&gt;</code> element as 'contenteditable', but don't know how to save it or retrieve the updated values. I inspected 'event' data that's passed to onRowClick method, but couldn't retrieve the 'id' of row (it's empty. event.srcElement.id or event.target.id are both empty). </p>
  
  <p>In short, I want to edit the table and see it update the tableData variable. Sorry for not asking it clearly the first time. </p>
  
  <p>Any guidance on how to solve my problem is greatly appreciated!</p>