Adding line breaks when using interpolation

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


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.