how to make 2 ways data-binding for td in angular 2?

Question

I need to use this editable column to display a "test" variable :

<td contentEditable="true" ngDefaultControl [(ngModel)]="test">{{test}}</td>

My td element displays the initial value of "test", but when I edit the td (using my keyboard), "test" does not change.

I have tested the same thing using input, and it works :

<input id="myinput" name="myinput" type="text" [(ngModel)]="test">

So what is the problem ?

How are you editing this exactly? All that is is a column/cell without input. The text is directly in the cell as content. — Igor, Apr 21 '17 at 18:02
contentEditable="true" is used to make a column/cell editable — BrainabilGH, Apr 21 '17 at 18:05
its not an exact duplicate as this is angular1 but still relevant.: [Contenteditable with ng-model doesn't work](http://stackoverflow.com/q/28583651/1260204) — Igor, Apr 21 '17 at 18:12
yes thanks lexith, I tried `[textContent]="test" (input)="test=$event.target.textContent" ` in place of [(ngModel)] and it works, I also omitted this `ngDefaultControl `. — BrainabilGH, Apr 21 '17 at 18:26

score 5 · Accepted Answer · answered Apr 21 '17 at 18:58

5

I tried this :

<td contentEditable="true" [textContent]="test" (input)="test=$event.target.textContent">{{test}}</td>

And it works.

answered Apr 21 '17 at 18:58

BrainabilGH

1 Answers1