How to bold partial text in a JavaScript string

Question

I am trying to bold some words in a string, for example, I want the name variable to be bold. In my Angular component, my code is like this:

const name = 'Mike';
const message = `My name is ${name}.`

And I'm adding < b > tag to the string:

const message = `My name is <b>${name}</b>.`

But in my angular template, as I'm passing the message along, it did not bold the string. Instead, it shows 'My name is < b >Mike< /b >.' in UI.

<div>{{message}}</div>

I tried to encode the bracket but id didn't work; Are there any way that I can make it partial bold?

##here is another page for you to look at.## ======= They give the answer here — rexj
– rexj, Commented Jun 26, 2019 at 21:25

Pietro Nadalini · Accepted Answer · 2019-06-26 21:23:34Z

2

I think you probably need to use innerHTML:

<div [innerHtml]="message"></div>

You can check the documentation for more information

Pietro Nadalini

1,8303 gold badges17 silver badges34 bronze badges

answered Jun 26, 2019 at 21:20

7307 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1