Angularjs nl2br(textarea newline and linebreak conversion) example

Sometimes we may need to display the message conversion in our angularJS Application. But if we are using the textarea for write the comment or something then the text display on same as like without line break. But we need display the text with like break by using nl2br(). we can also use directly in nl2br(). If we are work on PHP But if we are working on any angulaJS application then we can’t use it directly Because it is not any pre-define function.

So, we need to make a custom helper or something. So now in this example i will created a custom angular filter for the nl2br, on that way we can use it globally in our angularJS application. we will also use here nl2br filter add as 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(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
      return $sce.trustAsHtml(msg);
  }
});

Bellow i will give you a full example , you can check and test this.

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" class="container">
    <form name="myform" ng-submit="submit()">
      <div class="form-group">
        <label>Comment:</label>
        <textarea ng-model="myform.comment" class="form-control"></textarea>
      </div>
      <div class="form-group">
        <strong>Print Comment:</strong>
        <p ng-bind-html="myComment | nl2br"></p>
      </div>
      <div class="form-group">
        <button class="btn btn-success">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(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
          return $sce.trustAsHtml(msg);
      }
  });
</script>
</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →