CODEWITHSUNDEEP
angular
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Class binding based on variable value not working

I am trying to define a class dynamically to a TD like this.

 <td [className]="'myProject.OverallProjectStatus'" >{{myProject.OverallProjectStatus}}</td>

But on rendering it shows

 <td class="myProject.OverallProjectStatus" >Green</td>

I was expecting the value behind that variable Green their like this

 <td class="Green" >Green</td>

How can I achieve that? I'm working in Angular 9

Upvotes: 0

Views: 53

Answers (2)

Barremian
Barremian

Reputation: 31125

Controller variables are referred in property bindings either by double quotes or single quotes. The following refer to a valid member variable in the controller.

Refers to member variables

<td [className]="myProject.OverallProjectStatus">{{myProject.OverallProjectStatus}}</td>

OR

<td [className]='myProject.OverallProjectStatus'>{{myProject.OverallProjectStatus}}</td>

If you were to mix them up and enclose the inner variable name in another set of quotes, then the variable would be considered as string literal.

Refers to string literal

<td [className]="'myProject.OverallProjectStatus'">{{myProject.OverallProjectStatus}}</td>

OR

<td [className]='"myProject.OverallProjectStatus"'>{{myProject.OverallProjectStatus}}</td>

Although the common convention to denote member variable and string literal are "myProject.OverallProjectStatus" and "'myProject.OverallProjectStatus'" respectively.

Upvotes: 1

igg
igg

Reputation: 2250

Remove the ', you only need the ".

<td [className]="myProject.OverallProjectStatus" >{{myProject.OverallProjectStatus}}</td>

Upvotes: 1

Related Questions