Apply Dynamic CSS on a angular component based on object value

Question

Is there any way in angular, html or css to dynamically apply CSS based on object value:

HTML:

<mat-grid-tile *ngFor="let obj of objs">    
 <span class="(value according to variable)">
   {{ obj.n }}
 </span>
</mat-grid-tile>

CSS:

.first {
  color: #db4437;
}

.second {
  color: #32cd32;
}

What I want to do is, if obj.n is red, I want first as the class of span tag and second => otherwise

Shashank Vivek · Accepted Answer · 2019-03-19 04:29:05Z

2

Try [ngClass] and evaluate expression

<mat-grid-tile *ngFor="let obj of objs">    
  <span [ngClass]="(obj.n ==='red')? 'first' : 'second'">
  {{ obj.n }}
  </span>
</mat-grid-tile>

Take a look at this demo

edited Mar 19, 2019 at 4:29

answered Mar 16, 2019 at 12:38

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

3 Comments

Harshil Shah Over a year ago

It is not working, Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) I think there is some mistake in span tag ending with ".

Shashank Vivek Over a year ago

@HarshilShah : The answer you have selected is crude and has redundant code of [class.first] and [class.second]. Not a recommended angular way. Upto you. :)

Harshil Shah Over a year ago

I have different classes for different type of values of the obj. That's why I'm choosing another answer. Otherwise yours is working just fine, too.

Aleksey Melnikov · Accepted Answer · 2019-03-16 15:17:12Z

1

Or

<span [class.first]="obj.n === 'red'" [class.second]="obj.n !== 'red'">{{obj.n}}</span>

answered Mar 16, 2019 at 15:17

Aleksey Melnikov

1013 bronze badges

Collectives™ on Stack Overflow

Apply Dynamic CSS on a angular component based on object value

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related