contenteditable=“false” attribute not working on dynamically created span in angular 10

Question

I have added span element dynamically in.ts file where I have added contenteditable attribute but when it gets rendered on web page this attribute is didnt get appeared in tag. I have added as newHTML += &nbsp<span class='taggedUser' [contenteditable]='false'>${taggedUserName}&nbsp `.I want to use to this attribute. Reason: I want to highlight the user in text and for that I am adding span and its css.

Answer 1

how are you adding newHTML to your components html file? Are you using the innerHTML attribute like so:

[innerHTML]=newHTML

UPDATE:

Angular has a security mechanism to prevent XSS for example, So sometimes when you try to add something to your html as a string in runtime it strips some properties/styling from the html.

A simple example would be something like:

constructor(private _sanitizer: DomSanitizer) { }

ngOnInit() {
  this.newHTML += this.sanitize(`&nbsp<span class='taggedUser' [contenteditable]='false'>${taggedUserName}&nbsp `)
}

sanitize(htmlStr: string): SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(htmlStr);
}

https://angular.io/api/platform-browser/DomSanitizer