Multiple class names not working in NgClass

Question

I am trying to add multiple class names based on a condition on NgClass. It works for the last last condition but doesn't seem to work for the second. Looking in the inspector it appears as though the fas class is missed from the second condition.

<i [ngClass]="{'pr-1' : true,
               'valid-group fas fa-check-circle ' : isGroupValid('vg1'),
               'invalid-group fas fa-exclamation-circle' : !isGroupValid('vg1')}"></i>

This displays the exclamation circle icon correctly but not the check circle, if I swap the order around then the check circle works but not exclamation circle. This leads me to believe that the classes in the second condition do not work the same as the last, is this correct?

Answer 1

In your ngClass directive, the fas class visibility set in the "valid group" condition is overridden by that set in the "invalid group" condition. Since the pr-1 and fas classes are always present, you can take them out of the ngClass directive:

<i class="pr-1 fas" 
  [ngClass]="{'valid-group fa-check-circle ' : isGroupValid('vg1'),
              'invalid-group fa-exclamation-circle' : !isGroupValid('vg1')}">

If you want isGroupValid('vg1') to be evaluated only once, you can use:

<i class="pr-1 fas" 
  [ngClass]="isGroupValid('vg1') ? 'valid-group fa-check-circle' : 'invalid-group fa-exclamation-circle'">