Preserve line breaks in angularjs
AngularjsAngularjs Ng-RepeatAngularjs Problem Overview
I have seen this SO question.
My code instead of ng-bind="item.desc"
uses {{item.desc}}
because I have a ng-repeat
before.
So my code:
<div ng-repeat="item in items">
{{item.description}}
</div>
The item description contains \n
for newlines which are not rendered.
How can the {{item.description}}
display the newlines easily assuming that I have the ng-repeat
above?
Angularjs Solutions
Solution 1 - Angularjs
Based on @pilau s answer - but with an improvement that even the accepted answer does not have.
<div class="angular-with-newlines" ng-repeat="item in items">
{{item.description}}
</div>
/* in the css file or in a style block */
.angular-with-newlines {
white-space: pre-line;
}
This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you want to break on newlines, but also not collapse multiple spaces or white space preceeding the text (to render code or something), you can use:
white-space: pre-wrap;
Nice comparison of the different rendering modes: http://meyerweb.com/eric/css/tests/white-space.html
Solution 2 - Angularjs
Try:
<div ng-repeat="item in items">
<pre>{{item.description}}</pre>
</div>
The <pre>
wrapper will print text with \n
as text
also if you print the json, for better look use json
filter, like:
<div ng-repeat="item in items">
<pre>{{item.description|json}}</pre>
</div>
I agree with @Paul Weber
that white-space: pre-wrap;
is better approach, anyways using <pre>
- the quick way mostly for debug some stuff (if you don't want to waste time on styling)
Solution 3 - Angularjs
It's so simple with CSS (it works, I swear).
.angular-with-newlines {
white-space: pre;
}
- Look ma! No extra HTML tags!
Solution 4 - Angularjs
With CSS this can be achieve easily.
<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>
Or a CSS class can be created for this purpose and can be used from external CSS file
Solution 5 - Angularjs
Well it depends, if you want to bind datas, there shouldn't be any formatting in it, otherwise you can bind-html
and do description.replace(/\\n/g, '<br>')
not sure it's what you want though.
Solution 6 - Angularjs
the css solution works, however you do not really get control on the styling. In my case I wanted a bit more space after the line break. Here is a directive I created to handle this (typescript):
function preDirective(): angular.IDirective {
return {
restrict: 'C',
priority: 450,
link: (scope, el, attr, ctrl) => {
scope.$watch(
() => el[0].innerHTML,
(newVal) => {
let lineBreakIndex = newVal.indexOf('\n');
if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
el[0].innerHTML = newHtml;
}
}
)
}
};
function replaceAll(str, find, replace) {
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
}
angular.module('app').directive('pre', preDirective);
Use:
<div class="pre">{{item.description}}</div>
All it does is wraps each part of the text in to a <p>
tag.
After that you can style it however you want.
Solution 7 - Angularjs
Just add this to your styles, this works for me
white-space: pre-wrap
By this text in <textarea>
can be display as it's in there with spaces and line brakes
HTML
<p class="text-style">{{product?.description}}</p>
CSS
.text-style{
white-space: pre-wrap
}
Solution 8 - Angularjs
Yes, I would either use the <pre>
tag or use ng-bind-html-unsafe
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (use ng-bind-html if you are using 1.2+) after using .replace()
to change /n
to <br />
Solution 9 - Angularjs
Just use the css style "white-space: pre-wrap" and you should be good to go. I've had the same issue where I need to handle error messages for which the line breaks and white spaces are really particular. I just added this inline where I was binding the data and it works like Charm!
Solution 10 - Angularjs
I had a similar problem to you. I'm not that keen on the other answers here because they don't really allow you to style the newline behaviour very easily. I'm not sure if you have control over the original data, but the solution I adopted was to switch "items" from being an array of strings to being an array of arrays, where each item in the second array contained a line of text. That way you can do something like:
<div ng-repeat="item in items">
<p ng-repeat="para in item.description">
{{para}}
</p>
</div>
This way you can apply classes to the paragraphs and style them nicely with CSS.