How to insert a line break using a filter?

Question

This is my html for which I want the filter to execute:

<div class="col-xs-4 col-sm-15 previewBtnCont" ng-repeat="category in NavigationModel.pageArray" >
                    <button class="btn btn-lrg previewContentBtns" >
                        <div ng-bind="category.categoryDescription|filterPreviewBtnLabels"></div>
                    </button>
</div>

The logic is that if the button label is more than 10 characters, then from 11th character onwards it goes to the next line. The filter I wrote is working but the line break "
" is displaying as a string rather than acting as a line break. The filter function is:

common.filter('filterPreviewBtnLabels', function () {
        var testString  = "Hello";
      return function(value){
        if (!angular.isString(value)) {
            return value;
        }
        return value + "<br>" + testString;
      };
});

If button label is Chicken it should display "Chicken" line break and then "Hello" but it is simply displaying "Chicken
Hello".

Any assistance is most welcome.

Answer 1

If you want to introduce <br/> into the text then you need to use ng-bind-html directive to output HTML, instead of {{value}}.

Assuming the source of the button text is trusted (i.e. not originally coming from the user or another third party source), you'd need to use $sce service to "trust" the resulting value as HTML: $sce.trustAsHtml.

Here's an example that puts <br/> instead of space:

app.filter("break", function($sce){
  return function(value){
    if (!angular.isString(value)) return value;
    return $sce.trustAsHtml(value.split(" ").join("<br/>"));
  };
});

And this is the usage:

<button ng-bind-html="name | break"></button>

Plunker to illustrate