Nl2br-pipe NPM

nl2br-pipe

1. Description

nl2br-pipe or Nl2BrPipe is a pipe for angular2 projects which replaces the new line characters \n in a string with the   tag.

2. Installation

Install the module into your application and save it as a dev dependency in your package.json file

npm install nl2br-pipe --save-dev

3. Usage

In order to use the Nl2BrPipe you have to include/import its module into your application:

import {Nl2BrPipeModule} from 'nl2br-pipe';

Include it in your component's imports list of your @NgModule(...):

@NgModule({
  //...
  imports: [Nl2BrPipeModule],
  //...
})

Use it in your template to replace new line characters \n with the   tag:

<!-- Angular2.x -->
<div [innerHTML]="'<strong>test html content</strong>\nnew line\nthird line' | nl2br"></div>

<!-- Angular4+ -->
<div [innerHTML]="'<strong>test html content</strong>\nnew line\nthird line' | nl2br"></div>

<!-- sanitize forcibly the string -->
<div [innerHTML]="'<strong>test html content</strong>\nnew line\nthird line' | nl2br : true"></div>

Output:

<div>
  <strong>test html content</strong><br />new line<br />third line
</div>

4. Methods

transform(value: string, sanitizeBeforehand?: boolean): string

Replace the new line characters \n in a string with the   tag Bypass security and trust the given value to be safe HTML. The sanitizer will leave safe HTML intact and will replace new line character \n with the   tag.

WARNING: in Angular version 2.x, calling this method with untrusted user data exposes your application to XSS security risks!

Parameters:
value - string where to replace \n with   and not to escape the HTML tags.
sanitizeBeforehand - optional boolean parameter which allows you optionally to sanitize the value string. Parameter is available only for Angular 4+.

Return:
Method returns the new string containing   tag instead of \n.