Angular2 Pipes: output raw HTML

As a variation of the above CSS answer by Toolkit, if you want whitespace to be counted rather than collapsed, you can use the following code instead.

HTML

<span class="line-breaker">
  {{text}}
</span>

CSS

.line-breaker {
  white-space: pre-wrap;
}

What pre-wrap does (in addition to showing line breaks and wrapping etc like pre-line) is show every space as a space, rather than collapsing multiple spaces into one.

normal

Sequences of whitespace are collapsed. Newline characters in the source are handled the same as other whitespace. Lines are broken as necessary to fill line boxes.

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within the source.

pre

Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap

Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line

Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Source: https://developer.mozilla.org/en/docs/Web/CSS/white-space

The answer (I found just after posting the question) is not to change anything in the pipe definition, but instead to bind to [innerHtml] when using the pipe.

So replace this:

<div class="panel-body">
    {{mycontent | newline}}
</div>

with this:

<div class="panel-body" [innerHtml]="myContent | newline">
</div>

It would be nice if there were way to do this in the pipe definition though...

EDIT: Just a quick note since this answer seems to attract a number of downvotes that I'm leaving it as is, even though for my specific example use-case css probably would have been a better option and was in fact what I changed to use.

BUT my actual question was "how do I output raw html from an angular 2 pipe", not "what's the best way to render line breaks." This answer shows how to do this.

BEWARE though, as mentioned in comments below, if you do use the method in this answer you need to ensure that you're not rendering unchecked user input as this could open you up to XSS vulnerabilities.

You could also use pure CSS

<span class="line-breaker">
{{text}}
</span>

.line-breaker {
  white-space: pre-line;
}