javascript - Cleaner way to add both static and variable class in html in Angular 2

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.

Share Improve this question edited May 18, 2016 at 7:22 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked May 16, 2016 at 9:47 Praveen Puglia 5,6415 gold badges38 silver badges70 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

You 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cleaner way to add both static and variable class in html in Angular 2 - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)