Keep line breaks in HTML string

I had a similar situation where I had HTML code like this:

<div>{{msgTitle}}</div>

And I tried putting both '\r\n' and <br> in the string msgTitle, but neither of them worked to put a newline in the text displayed on the page. This link gave me the solution:

https://github.com/angular/angular/issues/7781

Use [innerHTML]="msgTitle" instead of {{msgTitle}}.

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.

by using the [innerText] directive the white spaces seem to be maintained, as well as the \n new lines

e.g. <small style="display:block" [innerText]="review.body"></small>