I have created an editable table following this tutorial -

The problem is: When I enter any data in the Item column it is getting repeated. For example, I entered df but it changed to dfdf instantly when I leave the column. It happens for first time for newly added row only. If I again change it to another value then it works fine. I am struggling to find the cause, please help.

CodePudding user response：

I found the solution. You shouldn't use the "placeholder"-style between the td start and closing tags, because you rely on "textContent" in the TS and so it sometimes happens, that Angular adds the value to the content of the Element that the user changed (USER-ADDED {{ thing.itemName }}). Check this in your Chrome Dev Tools, then you will see it as "dt" " dt ".

Check this StackBlitz: https://stackblitz.com/edit/angular-ivy-hkbz89?file=src/app/app.component.html

I used the [textContent]-Attribute and cleared the contents of the TDs.