It could be silly but how do I do something like this in angular 2 in a cleaner way? (Avoiding the string concatenation)
<div [class]="'indicator indicator-circle ' + colorClass"></div>
Explanation :
I want to add two static classes indicator
& indicator-circle
at all times but I also want the colorClass
to be applied which is an input from the ponent class.
It could be silly but how do I do something like this in angular 2 in a cleaner way? (Avoiding the string concatenation)
<div [class]="'indicator indicator-circle ' + colorClass"></div>
Explanation :
I want to add two static classes indicator
& indicator-circle
at all times but I also want the colorClass
to be applied which is an input from the ponent class.
3 Answers
Reset to default 6You could leverage the ngClass
directive with an array:
<div [ngClass]="['indicator', 'indicator-circle', colorClass]"></div>
See this link for more details:
- https://angular.io/docs/ts/latest/api/mon/index/NgClass-directive.html
You can use ngClass
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>
You need to put only colorClass
in [ngClass]/[attr.class]/[class]
property binding
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>