Angularjs nl2br(textarea newline and linebreak conversion) example with demo
In this post we will give you information about Angularjs nl2br(textarea newline and linebreak conversion) example with demo. Hear we will give you detail about Angularjs nl2br(textarea newline and linebreak conversion) example with demoAnd how to use it also give you demo for it if it is necessary.
Sometimes we require to display message conversion in your angularJS App, But if you are using textarea for write comment or something then text display on same like without line break. But we can display text with likebreak using nl2br(). we can use directly in nl2br() if we work on PHP But if we work on angulaJS then we can’t use it directly Because it is not pre-define function.
So, we require to make custom helper or something, So in this example i created custom angular filter for nl2br, that way we can use it globally in angularJS app. we will use nl2br filter add like as bellow :
app.filter('nl2br', function($sce){
return function(msg,is_xhtml) {
var is_xhtml = is_xhtml || true;
var breakTag = (is_xhtml) ? '<br />' : '<br>';
var msg = (msg + '').replace(/([^>rn]?)(rn|nr|r|n)/g, '$1'+ breakTag +'$2');
return $sce.trustAsHtml(msg);
}
});
Bellow i gave you full example and also demo, you can check and test it.
Example:
<!DOCTYPE html>
<html>
<head>
<title>angularjs nl2br example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style type="text/css">
p{
padding: 10px;
background-color: #e1e1e1;
}
</style>
</head>
<body>
<div ng-app="mainApp" ng-controller="myController" id="mainController" >
<form name="myform" ng-submit="submit()">
<div >
<label>Comment:</label>
<textarea ng-model="myform.comment" ></textarea>
</div>
<div >
<strong>Print Comment:</strong>
<p ng-bind-html="myComment | nl2br"></p>
</div>
<div >
<button >Check nl2br</button>
</div>
</form>
</div>
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller('myController', function($scope, $timeout) {
$scope.myComment = '';
$scope.submit = function(){
$scope.myComment = $scope.myform.comment;
}
});
app.filter('nl2br', function($sce){
return function(msg,is_xhtml) {
var is_xhtml = is_xhtml || true;
var breakTag = (is_xhtml) ? '<br />' : '<br>';
var msg = (msg + '').replace(/([^>rn]?)(rn|nr|r|n)/g, '$1'+ breakTag +'$2');
return $sce.trustAsHtml(msg);
}
});
</script>
</body>
</html>
Maybe it can help you…
Hope this code and post will helped you for implement Angularjs nl2br(textarea newline and linebreak conversion) example with demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs