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?

Answer 1

I think you probably need to use innerHTML:

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

You can check the documentation for more information