I added code to show the sort direction as well as color for selected column see the plunker
Here is the code to application class conditionally:
<i class="fa fa-lg" [ngClass]="{'fa-sort' : column !== 'ProjectID',
' fa-sort-asc active' : (column === 'ProjectID' && !isDesc),
' fa-sort-desc active' : (column === 'ProjectID' && isDesc) }"
aria-hidden="true"></i>
See ASC and DESC both have active class which is working only with DESC true condition, please see the plunker for more detail.
Here the code after applying all conditions:
<i aria-hidden="true" class="fa fa-lg fa-sort"></i>
<i aria-hidden="true" class="fa fa-lg fa-sort-asc"></i> // active missing
<i aria-hidden="true" class="fa fa-lg fa-sort-desc active"></i>
Any Idea why it is behaving like this:
Conditions in ngClass are applied in order. When the condition in ngClass is evaluated to false, it removes corresponding classes. If the same class is in two conditions, it might be added at first but in the next condition, it will be removed.
Possible solutions would be:
.active-asc, .active-desc {color: red;} and then apply them respectively in the conditions;or
'active' : column === 'columnName'