5

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?

DLO
  • 914
  • 1
  • 13
  • 30

3 Answers3

2

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

DLO
  • 914
  • 1
  • 13
  • 30
1

Please Add below css

p {margin: auto; display: inline-block;}
Mehul Davara
  • 321
  • 2
  • 4
  • Thanks, this makes my codepen example output appear on one line like: Hello<\b> world. but this is not my main issue. – DLO Feb 13 '20 at 09:54
1

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>
Dimitar Spassov
  • 2,535
  • 2
  • 7
  • 17
  • The thing is that i'm sending it in kvotation marks from the backend, but it's received in the frontend the way that you're displaying it. I understand that that the question can be deceiving so i'll edit it. – DLO Feb 13 '20 at 09:51
  • Then I would suggest you inspect that specific element in the browser dev tools. Is the font-weight of the span overriden by a rule with "!important" flag? If no, check the font you are using - does it support different font-weights? – Dimitar Spassov Feb 13 '20 at 11:32