html5 - can't format `\n` as new line in rendered string

Question

I have the following tag but '\n' inside item.value not formatted correctly .

<td ng-if="flag">{{item.value}}</td>

Are you using django? May be consider https://stackoverflow.com/questions/1356048/django-doesnt-display-newline-character-when-rendering-text-from-database — eman.lodovice, Aug 07 '19 at 10:08
@anwarmohamed Just to be sure, you are using AngularJS, right? — Ivar, Aug 07 '19 at 11:01
@anwarmohamed In that case I think your question should be a duplicate of this question instead: [Preserve line breaks in angularjs](https://stackoverflow.com/questions/19684708/preserve-line-breaks-in-angularjs) — Ivar, Aug 07 '19 at 11:21

score 0 · Answer 1 · answered Aug 07 '19 at 10:08

0

HTML needs a <br/> tag. Use this regex on your value.

item.value = item.value.replace(/(?:\r\n|\r|\n)/g, '<br>');

let item = {};
item.value= "Hi I am some text with a \n line break";
item.value = item.value.replace(/(?:\r\n|\r|\n)/g, '<br>');

document.write(item.value);

answered Aug 07 '19 at 10:08

E S

358
4
15

it shown as **item2
item 1** – Anwar Badr Aug 07 '19 at 10:28
How are you writing it to your document? – E S Aug 07 '19 at 10:45
`
```
{{ctrl.formatLine(item.value)}}
```
` ctrl---> `self.formatLine = function (value) { return value.replace(/(?:\r\n|\r|\n)/g, '
'); };`
– Anwar Badr Aug 07 '19 at 10:49
It seems like you have to use the [innerHTML] attribute/property binding, as answered [here](https://stackoverflow.com/questions/49013217/how-to-render-string-with-html-tags-in-angular-4) – E S Aug 07 '19 at 12:07
@abadr did it work? – E S Aug 07 '19 at 13:54

html5 - can't format `\n` as new line in rendered string

1 Answers1