Adding Line Breaks When Using Interpolation

Question

I have some html for the warning window. Using interpolation, I can reuse the same html to display several different warning messages. It looks like this:<p>{{ myAlertMessage }}</p>

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

For example, using </br>, or dividing the text into several lines in the component code (contained in parentheses or inverse ticks) or on a new line code ( 
). None of these functions create a line break in the text when a warning message is displayed.

I would prefer not to add additional property bindings to satisfy this particular use case.

Thanks in advance.

Answer 1

The solution, for Angular v2.1.1, should at least use [innerHTML]="myAlertMessage". There is no need to use "bypassSecurityTrustHtml" for line breaks or lists to work.

Answer 2

You can use a channel 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 myAlertMessagemay contain <br>or<p>

See also In RC.1, some styles cannot be added using binding syntax.

Answer 3

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

innerHTML html-.