Agregué código para mostrar la dirección de clasificación, así como el color de la columna seleccionada, vea el plunker
Aquí está el código de la clase de aplicación condicionalmente:
<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>
Vea que ASC y DESC tienen una clase activa que funciona solo con la condición verdadera de DESC, consulte el plunker para obtener más detalles.
Aquí el código después de aplicar todas las condiciones:
<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>
Cualquier idea de por qué se está comportando así:
Las condiciones en ngClass se aplican en orden. Cuando la condición en ngClass se evalúa como false
, elimina las clases correspondientes. Si la misma clase está en dos condiciones, podría agregarse al principio, pero en la siguiente condición, se eliminará.
Las posibles soluciones serían:
.active-asc, .active-desc {color: red;}
y luego aplíquelas respectivamente en las condiciones;o
'active' : column === 'columnName'