Angular and contenteditable

user_210417 0
Viewed 14147

I've searched the web but can't find a way to work with contenteditable events on Angular 6/7. Angular seems to have a messy solution with it but said feature doesn't seem to be carried over to recent versions.

A use case would be is on a content editable onChange event, call a function:

<div contententeditable="true" [change]="onNameChange(if.there.is.such.a.thing)">Type your name</div>

...

private name: string;

onNameChange(name) {
   this.name = name;
}

Any ideas on this? Thanks.

angular contenteditable events
2 Answers

You can use the input event, like so:

<div contenteditable (input)="onNameChange($event.target.innerHTML)">
   Type your name
</div>

Here is a Stackblitz demo

user_27809430

Just set a variable on element and on event input, get value from innerText

<h2 contenteditable="true" #x (input)="item.title = x.innerText">{{item.title}}</h2>

user_68329140
Related