Styling not parsed from backend

Question

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?

Answer 1

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