Angular and contenteditable

Issue

I've searched the web but can't find a way to work with contenteditable events on Angular 6/7. Angualr seem 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.

Solution

You can use the input event, like so:

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

Here is a Stackblitz demo

Answered By - user184994