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
Remove the ', you only need the ".
<td [className]="myProject.OverallProjectStatus" >{{myProject.OverallProjectStatus}}</td>
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.
