How to Get Line Break Within String Interpolation in Angularjs

How to get line break within string interpolation in Angularjs

Here are two demonstrably working versions...

White Space

Solution One... if you want newlines to be respected in HTML... (works with the back-tick strings, or with 'My \ntitle'...

document.getElementById('example').innerHTML = `Mytitle`;
h1 {  white-space: pre;}
<h1 id="example">
</h1>

Adding line breaks when using interpolation

The solution, for Angular v2.1.1 at least, is to use [innerHTML]="myAlertMessage". It isn't necessary to use "bypassSecurityTrustHtml" for line breaks or lists to work.

Keep line breaks in HTML string

Preserve line breaks in 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

convert new line /n to a line break in angular

This does not replace it, but you can use the CSS attribute white-space: pre-line; to render the \n in the browser:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

div {  white-space: pre-line;}
<div>Foo   Bar       Baz     Foo     Bar 

Baz</div>

AngularJS String with newlines, shown without breaks

Binding an HTML seems a bit unsafe. The directive suggested by CuriousGuy has a bit of extra engineering to correctly escape the HTML.

I find it easier to use a styling rule white-space: pre-line.

Example at JSFiddle.

See also:

  • Mozilla Developer Network documentation for white-space
  • Internet Explorer documentation for white-space
  • W3 documentation for white-space

Add new line to string in interpolation binding

use ng-bind-html directive.

<div class="col-md-8 col-sm-8">
<span class="test" ng-bind-html="test"></span>
</div>

JS

$scope.getLastAction= function (activity) {
if (activity) {
let desc= activity.Desc;
let first= activity.First;

let res= desc+ '<br>' + first;
$scope.test = res;
}
}

Angular: how to render line breaks in a string inside curly braces?

You could do some css stuff. mat-dialog-content element automatically gets the mat-dialog-content class. Simply add this style to this class in your global stylesheet

.mat-dialog-content{white-space:pre;}

Now your \n shall be considered as new line in your plain text. Please refer this simple stackblitz.

Thanks.

replacing comma with linebreak in a string in an uib-alert doenst work

Use ng-bind-html instead of interpolation:

<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" ng-bind-html="alert.msg"></div>

Here's a plunkr for demonstration.



Related Topics



Leave a reply



Submit