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.

  <tr *ngFor="#row of tableData>

should be changed with

<tr *ngFor="#row of tableData">

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.

<tr *ngFor="#row of tableData">
  <td contenteditable='true' (input)="onRowClick($event, row.id)">{{ row.country }}</td>
  <td contenteditable='true'>{{ row.capital }}</td>
</tr>

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

Answer 2

I was looking an answer to the same question. First, I got here. Later, I found amazing article with answer you was looking for.

Updated: I have udpated plunk as well as directive code to latest verstion of angular

Directive: contenteditableModel

<span contenteditable [(contenteditableModel)]="text"></span>

https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/

https://plnkr.co/edit/SRLYoX5chNYJIpZ4iqsG?p=preview

import {
    Directive,
    ElementRef,
    Input,
    Output,
    OnChanges,
    EventEmitter,
    HostListener,
    SimpleChanges
} from '@angular/core';

/**
 * 
 */
@Directive({
    selector: '[contenteditableModel]'
})
export class ContenteditableModelDirective implements OnChanges {

    @Input('contenteditableModel')
    public model: any;

    @Output('contenteditableModelChange')
    public update = new EventEmitter();

    private _lastViewModel: any;

    constructor(private elRef: ElementRef) {}

    public ngOnChanges(changes: SimpleChanges): void {
        if(this._lastViewModel !== changes['model'].currentValue){
            this._lastViewModel = this.model;
            this._refreshView();
        }
    }

    @HostListener('blur')
    public onBlur() {
        var value = this.elRef.nativeElement.innerText;
        this._lastViewModel = value;
        this.update.emit(value);
    }

    private _refreshView() {
        this.elRef.nativeElement.innerText = this.model;
    }
}