AngularJS dynamic styling with extended class

Question

I am trying to display a status label that will contain different background colors and text depending on the status in AngularJs (e.g. 'New' = green, 'Active' = yellow). I currently have a css file with

.status {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 12px;
    color: white;
    border-radius: 16px;
}

.status.new {
    background-color: #673AB7;
    border: 1pt solid #673AB7;
}

.status.active {
    background-color: #4CAF50;
    border: 1pt solid #4CAF50;
}

In my html I am referencing multiple classes like below

<span class="status pull-right">{{statusProperty}}</span>

Is it possible to combine class with ng-class to use extended classes or can this be accomplished through ng-style?

lealceldeiro · Accepted Answer · 2018-01-29 14:10:33Z

3

Yes, you can use ng-class along with class

In your case it would go like this:

<span class="status pull-right" ng-class="{'new': <condition_for_being_green>, 'active': <condition_for_being_yelow>}">{{statusProperty}}</span>

This will make your element to have the classes status and pull-right through the class attribute and to have the new | active classes when the conditions for being green and yellow are met respectively.

It means the element will have the classes

status pull-right new if the <condition_for_being_green> is true
status pull-right active if the <condition_for_being_yellow> is true
status pull-right new active if the <condition_for_being_green> and <condition_for_being_yellow> are true
status pull-right if the <condition_for_being_green> and <condition_for_being_yellow> are false

answered Jan 29, 2018 at 14:10

lealceldeiro

15.1k7 gold badges55 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FstTesla · Accepted Answer · 2018-01-29 14:13:47Z

1

Yes, you can apply both class and ng-class to the same element, as states the reference. The only caution is to avoid interpolated expressions in the class attribute when also ng-class is present.

Also, of course it is better using a CSS class instead of an inline style, considering both reusability and the fact that you already have written the needed classes.

answered Jan 29, 2018 at 14:13

FstTesla

9091 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic styling with extended class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related