nl2br-pipe or Nl2BrPipe is a pipe for angular2 projects
which replaces the new line characters \n in a string with
the <br /> tag.
Install the module into your application and save it as a dev
dependency in your package.json file
npm install nl2br-pipe --save-dev
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>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.
https://github.com/tvicpe/nl2br-pipe
To build the final package run this command:
ng build nl2br
The build process will generate the packed sources into the dist folder.
To publish the new version to npm, go into the dist folder:
cd ./dist/nl2br
and publish it to npm:
npm publish
1.2.3