I have an application with an angular frontend and C# backend. I'm receiving this rich text from the backend of my application:
<b>Hello <span style="font-weight:normal"> world </span></b>
What gets displayed is " Hello world "
What I want to be displayed is " Hello world "
The desired behaviour is that the styling of the span doesn't get overwritten. This codepen example shows the desired behaviour, but it is frontend ONLY: https://codepen.io/david-lo/pen/rNVOEbY
What am I missing?
I solved my issue by using SafeHtml and DomSanitizer :
Before:
public txt: string; //txt is rendered in my html file.
@Input() public set header(_txt: string) {
this.txt = _txt;
}
The string input _txt has value <b>Hello <span style="font-weight:normal"> world </span></b>
The problem was that my span styling was ignored so the output would be:
Hello world
After:
public txt: SafeHtml;
@Input() public set header(_txt: string) {
this.txt= this.domSanitizer.bypassSecurityTrustHtml(_txt);
}
By using DomSanitizer the way shown above, my span styling was respected in the frontend and I achieved the desired output:
Hello world
Please Add below css
p {margin: auto; display: inline-block;}
If you are trying to render that code with the backslash symbols, this is clearly incorrect HTML.
The correct line should look like this:
<b>Hello <span style="font-weight:normal"> world </span></b>
<p>"Hello <b> world</b>"</p>