Angular nl2br Pipe Example

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.

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 { 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 { }

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. nonentwo';
}

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

This is example.
one
two

Hope this code and post will helped you for implement Angular nl2br Pipe Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github