convert new line /n to a line break in angular

Question

I have a string which contain new line character /n. Trying to display

the string. Instead of taking the /n as new line, it displays '/n' as text.

   $scope.myOutput = " Hello /n"

    {{ myOutput | textFormat }}

Required -> Hello (on html page)

Tried :

 app.filter('textFormat', function() {
    return function(x) {
      return x.replace(/\\n/g, '<br/>');
   }

Tried css styles like white-space: pre;

Does this answer your question? [angular - create a new line on HTML](https://stackoverflow.com/questions/44410095/angular-create-a-new-line-on-html) — Vega, Mar 21 '23 at 20:15

score 62 · Accepted Answer · answered Jun 12 '18 at 09:47

This does not replace it, but you can use the CSS attribute white-space: pre-line; to render the \n in the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

div {
  white-space: pre-line;
}

<div>Foo
   Bar
       Baz     Foo
     Bar
 


     
  Baz
</div>

score 11 · Answer 2 · answered Oct 01 '21 at 12:11

11

in Angular you can easy convert text to the original format by entering it like so:

component:

this.myText = 'This is line one\nThis is line 2\nAnd here is 3'

html:

<div [innerText]='myText'></div>

answered Oct 01 '21 at 12:11

Maurice Buiten

score 0 · Answer 3 · answered Dec 07 '17 at 22:13

1 - rewrite your filter next way:

.filter('textFormat', function() {
    return function (x) {
      return x.replace(new RegExp('\/n', 'g'), '<br/>');
    }
 })

2 - in your html you should use the next syntax:

<span ng-bind-html="myOutput | textFormat"></span>

Where myOutput is $scope.myOutput = ' Hello /n'

3 Answers3