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.

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.

• javascript
• html
• angular
• typescript

• css-tricks.com/injecting-line-break ...this can be helpful – Anirudh Mangalvedhekar Commented Nov 22, 2016 at 15:49
• It would seem any html sequences are being escaped automatically, is there any way for you to turn that feature off? I'm not to familiar with typescript or angular so just a suggestion. – Mike Commented Nov 22, 2016 at 15:50
• Does adding a \n not work? "System Alert\nSomething has happened" – Lockless Commented Nov 22, 2016 at 17:06
• @Call_Back_Function I tried that and no, it doesn't work. – Brendan B Commented Nov 24, 2016 at 11:54

4 Answers 4

Just use

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

the innerHTML property will interpret your html code.

The solution, for Angular v2.1.1 at least, is to use [innerHTML]="myAlertMessage". It isn't necessary to use "bypassSecurityTrustHtml" for line breaks or lists to work.

You can use a pipe like

import { Pipe, Sanitizer } from '@angular/core';

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:Sanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

and use it like

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

where myAlertMessage can contain <br> or <p>

See also In RC.1 some styles can't be added using binding syntax

Try to use \n in your myAlertMessage text. Something like that: "\n Some alert text \n Newline of the alert text";

And use a <pre> html tag in your component HTML file like that:

<div>
  <p><pre>{{ myAlertMessage }}</pre></p>
</div>