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 a

Answer 1

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

Answer 2

value.replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');

works for me

Answer 3

If you are binding Typescript variable in HTML and it contains '\n' then you need to replace them < br/> otherwise keep < br/> from beginning.

However String interpolation will not break the line you need to use property binding with innerHtml like:

<span [innerHtml]="stringVariableName"></span>

Answer 4

What about:

<pre>{{text}}</pre>

Or for html:

<pre [innerHtml]="text"></pre>

I often use the HTML pre element that represents preformatted text.

Another trick I often use to format Json is:

<pre>{{jsonString | json}}</pre>

Answer 5

You could also use pure CSS

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

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

Answer 6

Here's my take on it, using a simple pipe

make a file called nl2pbr.pipe (which stands for: new line to p / br) and put it inside pipes folder, and this is its content:

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

@Pipe({
  name: 'nl2pbr'
})
export class Nl2pbrPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    // return value.replace(/\n/g, '<br />');
    value = value.replace(/(?:\r\n\r\n|\r\r|\n\n)/g, '</p><p>');
    return '<p>' + value.replace(/(?:\r\n|\r|\n)/g, '<br>') + '</p>';
  }

/****************************
 * example useage
 * <div [innerHTML]="'testi\n\nng \n t/n/nest\n\b\ning' | translate | nl2pbr"></div>
 ****************************/

}

Make sure you add the pipe to app.module:

import { Nl2pbrPipe } from './pipes/`nl2pbr.pipe`';

and Nl2pbrPipe to the declarations: []

Usage example:

<div [innerHTML]="'hello\n\n this is a new paragraph\n and a new line' | translate | nl2pbr"></div>

will output:

<p>hello</p>
<p>this is a new paragraph <br/> and a new line</p>