Convert New Line /N to a Line Break in Angular

convert new line /n to a line break in angular

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>

Keep line breaks in HTML string

HTML, in general, uses br tags to denote a new line. A plain textarea tag does not use this, it uses whatever the user's system uses to denote a new line. This can vary by operating system.

Your simplest solution is to use CSS

<main role="main" class="container">
  <p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>

This will maintain any "white space" formatting, including additional spaces.

If you want to actually replace the newline characters with br tags you can use the following regex

<main role="main" class="container">
  <p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>

Edit Thanks to ConnorsFan for the heads up on replace not working with interpolation.

Typescript - Creating New Lines in a string using \n

You need to convert the string by replacing all the \n with <br> tags. And then you need to bind it as HTML instead of string.

Example:

str: String = "First ordered list item\n2. Another item\n * Unordered sub-list.\n"

//Replace \n with <br>
this.str.replace("\n", "<br>");

Now in your template instead of doing this:

<div>{{str}}</div

You need to do this

<div [innerHTML]="str"></div>

By binding it to innerHTML, you are treating your string as html. Hence the br tags will be processed.

Hope this helps.

How to get line break within string interpolation in Angularjs

Here are two demonstrably working versions...

White Space

Solution One... if you want newlines to be respected in HTML... (works with the back-tick strings, or with 'My \ntitle'...

document.getElementById('example').innerHTML = `Mytitle`;

h1 {  white-space: pre;}

<h1 id="example">
</h1>

javascript/angular: add 'line break' via string

One of the ways could be adding a class to your element, say, testString, like so:-

.testString{
white-space:pre
}

white-space:pre should allow breaking at \n characters.

how to convert br to newline in angular html

Replace <br/> with \n in your java code, otherwise it's a part of text.

New Line '\n' is not working in Typescript

\n does not cause a line break in html.

You'll need to use a <br/> or wrap your text in a block element.

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

Or

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';

Replace \n with br tag angular 6

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>

how to add line break in Angular pipe output

<th>
  {{(date | date: 'EEE')}}<br/>
  <strong>{{(date | date: 'MMM')}}</strong><br/>
  {{(date | date: 'd')}}
</th>

---

Related Topics