Question

0

100

Vistas

Angular 2 conditional class active in second condition not working

I added code to show the sort direction as well as color for selected column see the plunker

if sortable show up/down arrow: working
if Ascending show down arrow with active color: ACTIVE NOT APPLYING
if descending show up arrow with active color: working

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:

8 months ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-05-26T18:15:26.280Z

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:

change style classes to .active-asc, .active-desc {color: red;} and then apply them respectively in the conditions;

or

add new condition 'active' : column === 'columnName'