CODEWITHSUNDEEP
javascriptangularjs
guagay_wk
guagay_wk

Reputation: 28088

Change font color of text in $scope variable in AngularJS

I am using AngularJS. I have a scope variable $scope.TextToUser which is printed in html to be shown to user on website. In my controller, the code is simple and looks like this;

$scope.TextToUser='UserText'

On the corresponding html page, the code is just {{TextToUser}}.

I tried to turn the text to red by using the following code in the controller;

$scope.TextToUser = '<font size="3" color="red"> 'UserText'</font>'

Unfortunately, on the html page, the entire string was printed and not UserText in red. How can I turn the text red? Simple, straight-forward methods will be preferred.

Upvotes: 0

Views: 1727

Answers (1)

TheVillageIdiot
TheVillageIdiot

Reputation: 40512

Well, following is more proper:

app = angular.module('<name of your app>', ['ngSanitize']);

app.controller('<controller name>', function($scope, $interpolate){
    $scope.Text = 'Test to User In Red';
    $scope.TextToUser = $interpolate('<font size="3" color="red">{{Text}}</font>')($scope);
});

Now bind html:

<span ng-bind-html="TextToUser"></span>

You need to include sanitize script. https://code.angularjs.org/1.3.2/angular-sanitize.js

Note:- I tried using $interpolate but it gives error about unsafe stuff without ngSanitize.

The working plunk is here.

Upvotes: 1

Related Questions