Styling text color in angularjs at runtime

Question

I have a html page with this code

<p id="roonnameDiv" >{{chatRoom}}</p>

and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page

$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};

I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .

Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework

..................Edit .............................

I used the ngstyle as suggested by answers below

$scope.$parent.chatRoom = $stateParams.roomId; $scope.myStyle = {color: "green"};

however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body. Switching off the body color tag just turns the text black instead of green .

Following is the body

<body ng-app="xyz" ng-controller="AppController" class="ng-scope">

This is the body style

body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?

Vinay K · Accepted Answer · 2015-03-03 14:12:56Z

2

You can use ng-style directive.

In Markup

<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>

In controller

$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.

More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle

answered Mar 3, 2015 at 14:12

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

5 Comments

Altanai Over a year ago

did not work . the text just appears grey as default color of body .

Vinay K Over a year ago

Can you create plnkr/fiddle for this?

Altanai Over a year ago

plnkr.co/edit/v8f0Z3owuvl3XvUaUs5d?p=preview @Vinay K . I have tried my best to reflect values however it doesnt refelect my color problem correctly

Vinay K Over a year ago

There are multiple problems. 1. not included ui-router js file. 2 typo in specifying controller. 3. ui-view is not declared in markup. 4. myStyle was not set in proper scope. Fixed all these in this plnkr: plnkr.co/edit/SSd3kMQzTHaPzS4NOo2Y?p=preview

Altanai Over a year ago

I had the /** * version v0.2.13 * link angular-ui.github.com * license MIT License, opensource.org/licenses/MIT */ merged and minified with angular.js in a single js file . However your solution fixed my problem . Looks I was missing on adding $parent in $scope.$parent.myStyle . It works perfectly now .

Ahmet Zeytindalı · Accepted Answer · 2015-03-03 14:15:29Z

1

try this

<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>

answered Mar 3, 2015 at 14:15

Ahmet Zeytindalı

4513 silver badges10 bronze badges

Collectives™ on Stack Overflow

Styling text color in angularjs at runtime

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related