Change font color of text in $scope variable in AngularJS

Question

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.

What happened to all the earlier answers? Got deleted? They looked promising. — guagay_wk
– guagay_wk, Commented Nov 20, 2014 at 2:55

amantur · Accepted Answer · 2014-11-20 03:02:29Z

1

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.

edited Nov 20, 2014 at 3:02

answered Nov 20, 2014 at 2:48

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

guagay_wk Over a year ago

Thanks. Got worried what happened to your answer. It suddenly disappeared just now. Will try it out. Many thanks again.

amantur Over a year ago

@user768421 was putting up plunk with proper way of doing it.

guagay_wk Over a year ago

Wow. So helpful of you. THanks!!

Collectives™ on Stack Overflow

Change font color of text in $scope variable in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related