wrapping text in an angular interpolated binding

Question

I'd like to do something like this, where I'm trying to keep the line breaks that I have in the data.

<div>    
   <p> {{outputline}} </p>
</div>

where outputline is hello\r\nworld or hello<br>world

Both of which I've tried. I can do it in a more complex way with outputline1, outputline2, etc.

Any suggestions?

Answer 1

For hello\r\nworld, you can add

p {
  white-space: pre;
}

in you css, or <pre> instead of <p> in your template.

Answer 2

Try <p [innerHTML]="outputline"></p>