replace \n with <br> tag angular 6

问题

i have rest api whit /n code, can angular 6 replace with <br> tag

here's my code:

{{x.deskripsi}}

i try use https://www.npmjs.com/package/angular-nl2br-filter

but i have no idea how to use with binding inside {{}} tag

i try using this code

<p ng-bind-html="x.deskripsi | nl2br"></p>

but doesn't work

any help?

thanks before

回答1:

You don't need a library. Simply set the white-space property of your tag to pre-wrap (or use a <pre> tag that should have this style by default)

document.querySelector('#formatted').innerText = 'Lorem\nIpsum';

#formatted {
  white-space: pre-wrap;
}

<div id="formatted"></div>
<div>Lorem\nIpsum</div>

回答2:

You can use a pipe for the same:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
transform(value: string): string {
      return value.replace(/\n/g, '<br/>');
   }
}

The pipe must be included in your @NgModule declarations to be included in the app. To show the HTML in your template you can use binding innerHTML.

<p [innerHTML]="x.deskripsi | replaceLineBreaks"></p>

来源：https://stackoverflow.com/questions/50327396/replace-n-with-br-tag-angular-6