CODEWITHSUNDEEP
cssangularjsng-classng-style
Carl
Carl

Reputation: 861

AngularJS dynamic styling with extended class

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?

Upvotes: 2

Views: 208

Answers (2)

FstTesla
FstTesla

Reputation: 874

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.

Upvotes: 1

lealceldeiro
lealceldeiro

Reputation: 14998

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

Upvotes: 3

Related Questions