contenteditable div is focusing out while editing it

Question

I am new to angular and I have a textarea and a contenteditable div. Inside textarea HTML code will be there and div render its preview and if we modify anything in preview div the same will reflect in HTML code in textarea. Initially after one edit(erase or adding 1 character) div used to focus out and later I came up with a solution that can keep the div 1 sec focused after that again, it will focus out, and then I have tried adding focus event listener. this kept the div focused but it wasn't reflected the HTML code whatever modifications happened in preview div. I need div not to focus out while editing it and whatever modifications happened in the div should reflect HTML in textarea. any help would be appreciated. thank you.

DEMO

  content = 
`<h2>Hello</h2>
<p>This is a great example...</p>
`;
updateModel(event) {
  console.log(event.target.innerHTML)
  setTimeout(()=> {
    this.content = event.target.innerHTML;
  }, 1000)
}

<textarea 
  [(ngModel)]="content"
  cols="50" 
  rows="10"></textarea>

<br><br><br>

<div [innerHtml]="content" contenteditable="true" (input)="updateModel($event)" #model>
</div>

Answer 1

Demo Your problem is same model to both element. You need to change textarea's model. You can create on more model for textarea.

  contentToText=""
  constructor(){this.contentToText=this.content;}

then in your function assign to it

updateModel(event) {
    this.contentToText = event.target.innerHTML;
  }

in html

<textarea 
  [(ngModel)]="contentToText"
  cols="50" 
  (input)="content=contentToText"
  rows="10"></textarea>