Angular nl2br Pipe Example

By Hardik Savani | April 4, 2020 | Category : Angular


Hi All,

I will explain step by step tutorial angular nl2br pipe. let’s discuss about nl2br pipe in angular. I’m going to show you about line break in angular. This post will give you simple example of angular new line in string.

In this post, i will example you how to replace \n to new line in angular. basically if you use nl2br function in php or other language.

Sometime we are storing data from textarea and use enter data using enter key and proper format data with line break but when we display that data it's now display with break like because we store \n on database. so it's not display properly, we can make it do using nl2br.

Here, we will create custom pipe for nl2br in angular project. you can use it in angular 6, angular 7, angular 8 and angular 9 application.

Let's follow bellow step to resolve our problem.

Create Custom Pipe: src/app/nl2br.pipe.ts

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

@Pipe({

name: 'nl2br'

})

export class nl2brPipe implements PipeTransform {

transform(value: string): string {

return value.replace(/\n/g, '<br/>');

}

}

Import Pipe: src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { nl2brPipe } from './nl2br.pipe';

import { AppComponent } from './app.component';

@NgModule({

imports: [ BrowserModule, FormsModule ],

declarations: [ AppComponent, nl2brPipe ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Update Component: src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

body = 'This is example. \none\ntwo';

}

Use Pipe in HTML: src/app/app.component.html

<p [innerHTML]="body | nl2br"></p>

Now you can run and see bellow output:

This is example.

one

two

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: