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?

Does this answer your question? [Preserve line breaks in angularjs](https://stackoverflow.com/questions/19684708/preserve-line-breaks-in-angularjs) — Ramana, Feb 29 '20 at 05:08

score 3 · Accepted Answer · answered Feb 29 '20 at 03:46

3

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

answered Feb 29 '20 at 03:46

bgibers

score -1 · Answer 2 · answered Feb 29 '20 at 04:56

-1

For hello\r\nworld, you can add

p {
  white-space: pre;
}

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

answered Feb 29 '20 at 04:56

Kaustubh Badrike

2 Answers2