"contenteditable" attribute doesn't work when element added via "[innerHTML]" in Angular

Question

I have met an unexpected behavior for me of contenteditable attribute in Angular. I have an object with HTML, stored as a value:

public json_html = {
  "button1":"<p contenteditable='true'>first section</p>",
  "button2":"<p>second section</p>",
  "button3":"<p>third section</p>",
}

And I apply this values like this (via innerHTML):

<div [innerHTML]="selectedButton"></div>

Everything works fine except contenteditable attribute - it's just missed in HTML:

QUESTION:

How to force contenteditable attribute to work (when element becomes through [innerHTML])? Is there a proper way to do that or may be there is a workaround?

LIVE EXAMPLE: https://stackblitz.com/edit/angular-9pyhg3-lnivvj?file=app%2Fbutton-overview-example.html

score 1 · Accepted Answer · answered Jan 28 '18 at 14:18

1

That attribute is stripped for security reasons

If you tell Angular that it should treat it as safe, use DomSanitizer

  constructor(sanitizer: DomSanitizer) {
    this.json_html =  {
    "button1": sanitizer.bypassSecurityTrustHtml("<p contenteditable='true'>first section</p>"),
    "button2":"<p>second section</p>",
    "button3":"<p>third section</p>",
  }

StackBlitz example

answered Jan 28 '18 at 14:18

Günter Zöchbauer

623,577
216
2,003
1,567

1

Glad to hear :) – Günter Zöchbauer Jan 28 '18 at 14:23
can you tell me what DomSanitizer will do? or any reference link would be useful. @GünterZöchbauer – Nihal Jan 28 '18 at 14:26
It wraps the value in a `SafeHtml` object, which is the marker for Angular to treat the value as safe. https://angular.io/api/platform-browser/DomSanitizer – Günter Zöchbauer Jan 28 '18 at 14:31
can we add that html line in html `
` instead of the json, it will become complicated for me – user2828442 Jan 28 '18 at 14:55
You can use a pipe like shown in https://stackoverflow.com/questions/31548311/angular-html-binding/41089093#41089093 – Günter Zöchbauer Jan 28 '18 at 15:06
I mean to say, the code which we added in json `sanitizer.bypassSecurityTrustHtml` , can we add this in `home.html` , that will make my life easier – user2828442 Jan 28 '18 at 15:19
i was trying the same thing by creating a pipe but could not implement :( – user2828442 Jan 28 '18 at 15:20
Does the pipe from stackoverflow.com/questions/31548311/angular-html-binding/… not work for you? Can you please update the stackblitz example to demonstrate the problem? – Günter Zöchbauer Jan 28 '18 at 15:26

"contenteditable" attribute doesn't work when element added via "[innerHTML]" in Angular

1 Answers1

Linked