Search code examples
angularangular2-mdl

angular2 mdl apply css class dynamically to material icon

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

Solution

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