multi-line text will not do line break in view

[asiacoll]

I have a multi-line text data from database and want it to be displayed as {{text}} in template. However the result just display a text string, no line break. br is just ignored. Please fix!

[zoechi]

That's by design. You can't bind HTML using {{}}. Use instead <div [innerHTML]="text"></div> (or any other tag instead of div of course)

[asiacoll]

thanks. It works. However i found another issue.
I found that "\n" can break line in textarea,but not in <div [innerHTML]="text"></div>. I think I must replace "\n" with "br" in <div [innerHTML]="text"></div>. The problem is "\n" is no more exist in <div [innerHTML]="text"></div>. May be "\n" has changed it's form in <div [innerHTML]="text"></div>. But what is the changed form. Please help. I am used to asp.net, Anguar 2 is new to me.

[asiacoll]

the issue was resolved using x.replace(new RegExp('\n', 'g'), "<br />")

[zoechi]

If your problem is solved, you could go ahead and close the issue.

[Paulmolin]

Be careful, as interpreting user input as HTML enables users to use html tags. Angular seems to remove Javascript handlers such as onerror or onmouseover etc. but you migth insert XSS in your app.

[Airblader]

This issue appears on Google pretty quickly, so I just wanted to share a simple solution for this:

white-space: pre-wrap

(It's also what YouTube seems to do for their comments)

[Amrit1994]

{{item.description}}

/* in the css file or in a style block */
.angular-with-newlines {
white-space: pre-wrap;
}

Reference: https://stackoverflow.com/questions/19684708/preserve-line-breaks-in-angularjs

[Paradisee]

That's what i did: <div><pre>{{ whatever }}</pre></div>

[Akitha]

Just add this to your styles, this works for me

white-space: pre-wrap

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}

By this text in <textarea>can be display as it's in there with spaces and line brakes

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}