Adding line breaks when using interpolation

Question

I have some html for an alert message box. Using interpolation, I can re-use the same html to show multiple different alert messages. It looks like this: <p>{{ myAlertMessage }}</p>

Now I want to show a longer alert message containing line breaks. However, I cannot seem to modify the interpolated component property (which is a string) in any way which will introduce line breaks.

For example, using </br>, or spacing the text across several lines in the component code (contained in either parentheses or back ticks), or the new line code (
). None of these work to produce a line break in the text when the alert message is shown.

I would prefer not to have to add further property bindings just to cater for this particular use case.

Thanks in advance.

Answer 1

Just use

<span [innerHTML]="myAlertMessage"></span>

the innerHTML property will interpret your html code.