CODEWITHSUNDEEP
angularjs
Altanai
Altanai

Reputation: 1393

Styling text color in angularjs at runtime

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 ?

Upvotes: 0

Views: 3121

Answers (2)

Ahmet Zeytindalı
Ahmet Zeytindalı

Reputation: 451

try this

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

Upvotes: 1

Vinay K
Vinay K

Reputation: 5572

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

Upvotes: 2

Related Questions