How to display newline in Angular Template?

Question

I have a angular page which has a popup, it uses below code as the content of the popup:

<div class="xs-12 form-group">
    <div class="no-overflow" *ngIf="detail.Status; else empty">{{detail.Status}}</div>
</div>

Now, detail.Status has some newline (\r\n) in it, and I want to show the newline on the page. How to do it?

I tried to replace \r\n with html code for new line, but it shows the code as text directly, not as html.

Answer 1

You should use

String.fromCharCode(10);

with CSS

white-space: pre-line;

Here si working example: https://jsfiddle.net/Nxja/3xtcqdej/1/