convert new line /n to a line break in angular

Rk R Bairi picture Rk R Bairi · Dec 7, 2017 · Viewed 23.8k times · Source

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;

Answer

Tim Schoch picture Tim Schoch · Jun 12, 2018

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>