How can i pass string and preserve formatting like <strong>

Issue

I have a Angular form that on success routes to a new component that displays that the request was successful. To pass the info i use the history.state.data which works fine but i cant pass in a value with formatting.

the code i use looks like this

if (res.Success === true) {
  let email = this.form.value.email
  let message = `Your preference for <strong>${email}</strong> has been successfully updated !`
  this._router.navigate(['success'], {state : {data : {message: message}}}) 
}

then on the other component I read the message

this.message = history.state.data?.message

and in template

<p style="text-align: center;">{{message}}</p>

But my output looks like this, how can i make the actually provide the format vs just printing out ?

Your preference for <strong>ded@ede.com</strong> has been successfully updated !

Solution

You must use innerHtml attribute. Otherwise it will render it as text.

<p style="text-align: center;" [innerHtml]="message"></p>

See: How to render string with html tags in Angular 4+?

Answered By - Ricardo Machado