Angular2 Pipes: output raw HTML

Question

I'm trying to create an Angular2 custom pipe that outputs raw html. I want it to simply convert newlines in the input into HTML line breaks. How do I output raw HTML from an angular2 pipe?

The following is my current pipe definition, but it escapes the HTML which I don't want:

import {Pipe, PipeTransform} from '@angular/core'; /*  * Converts newlines into html breaks */ @Pipe({ name: 'newline' }) export class NewlinePipe implements PipeTransform {     transform(value: string, args: string[]): any {         return value.replace(/(?:\r\n|\r|\n)/g, '<br />');     } } 

EDIT: Just a quick note since this question seems to get a number of views and activity that I'm leaving my accepted answer 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. 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" which is what the accepted answer shows.

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

Answer 1

You could also use pure CSS

<span class="line-breaker"> {{text}} </span>  .line-breaker {   white-space: pre-line; } 

Answer 2

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.