Search code examples
angularcontenteditable

Get Partially Editable HTML Content from DB and bind to div tag, Angular 6

I am getting partially editable content from backend. e.g.

<p>Dear <b>empname</b>,<br /><br />This refers to the Notice issued 
 to you on date regarding your alleged <i contentEditable="true">____________</i>
and violation of the Employee Code of Conduct,
particularly the <i contentEditable="true">____________</i>.<br /><br /></p>

I am binding this content to div tag.

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

Content is not editable after this. I do not want complete content to be editable, only i tags inside div.

Solution

  • Apparently, Angular sanitize the data for any malicious content, So it was removing from HTML data i was getting from API. I used below code to make it work.

    this.sanitizer.bypassSecurityTrustHtml(data);