Angular - Make section of string variable bold

Question

Is there any way in which I can make part of a string being assigned to a variable bold?

I have tried the following:

boldTxt = 'bold'

message = 'this text should be ' + this.boldTxt.toUpperCase().bold() ;

But what I get in the HTML is:

this should be <b>BOLD</b>

STACKBLITZ

Answer 1

You can use innerHTML, something like:

<p [innerHTML]="message"></p>

Setting the value of innerHTML removes all the element's contents and replaces them with nodes constructed by parsing the HTML set in the message variable. When the text is set using statement <p>{{message}}</p> the content is not parsed as HTML but as plain string.