0

I am trying to apply a css class to material icon like following:

<i ngClass="{task.isDone ? 'checked-icon material-icons' : 'material-icons'}">check_circle</i>

without condition it would look like this (which works):

<i class="checked-icon material-icons">check_circle</i>

I have a variable isDone in my component and I want to apply this extra checked-icon class only when that variable is true. But my conditional statement do not work.

What am I doing wrong?

P.S.: I tried following

<i ngClass="{task.isDone ? checked-icon material-icons : material-icons}">check_circle</i>

but it applied this extra class to every element regardless of value false

Thinker
  • 5,326
  • 13
  • 61
  • 137

1 Answers1

1

try like this

[ngClass]="{'className1': task.isDone, 'className2': !task.isDone }"

if you want material-icons class in common use normal class="material-icons" along

in your case

<i class="material-icons" [ngClass]="{'checked-icon':task.isDone}">check_circle</i>
Hareesh
  • 6,770
  • 4
  • 33
  • 60
  • If material-icons is common then what could be the className2? In my case I just want to apply extra checked-icon along with material-icons when a condition is true otherwise material-icons alone – Thinker Jul 26 '17 at 17:51