Is there a way to apply bold to selected text in textarea in angular js?

Question

i wanted to create a button that makes text area text bold. i used the example from here and was successfull in making text bold. But now i want to make the selected text only bold. Is there a way to do this. Here is my code. css

.text_type_bold {
        font-style: none;
        font-weight: bold;
    }



$scope.textBold = function () {
        $scope.class = "text_type_bold";
    };

 <div>           
<button ng-click="textBold()" class="btn btn-sm"><b>B</b></button>
  </div>

    </textarea>

Answer 1

If you're trying to make text inside text area look bolder you can do that using simple CSS classes.

But if you're looking to format selected text only (bold, underline, link, etc), you will probably be better off using a text editor plugin. For example, see Redactor, CKEditor, etc.

Answer 2

You could use ng-class directive.

<div ng-controller="MyCtrl">
 <textarea ng-class="{text_type_bold: isBold}">Bob</textarea>
 <button ng-click="makeBold()">bold</button>
</div>

.text_type_bold{
  font-style:none;
  font-weight:bold;
}

var app = angular.module('myApp',[]);
function MyCtrl($scope) {   
    $scope.isBold = false;
    $scope.makeBold=function(){
        $scope.isBold = !$scope.isBold;
    }
}

See the fiddle http://jsfiddle.net/Aejvm/117/