nl2br-pipe

1. Description
2. Installation
3. Usage
4. Methods
5. Git repository
6. Build
7. Publish to npm
8. Version

1. Description

nl2br-pipe or Nl2BrPipe is a pipe for angular2 projects which replaces the new line characters \n in a string with the <br /> 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 <br /> 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 <br /> 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 <br /> 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 <br /> 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 <br /> tag instead of \n.

5. Git repository

https://github.com/tvicpe/nl2br-pipe

6. Build

To build the final package run this command:

ng build nl2br

The build process will generate the packed sources into the dist folder.

7. Publish to npm

To publish the new version to npm, go into the dist folder:

cd ./dist/nl2br

and publish it to npm:

npm publish

8. Version

1.2.3