angular2 mdl apply css class dynamically to material icon

Question

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

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