Angular 2 ng-if失败

Question

Trying to apply css styles dynamically for the element which has ng-if condition. Works fine, if the condition is true. Is there any way that I can modify the element even if the condition fails. I know I can find the element (by getElementsByClassName) and modify but is there any other better solution other than this?

ex:

<span *ngIf="orderBy=='asc'" [ngStyle]="{'height': value+ '%'}"></span>                              
    <span *ngIf="orderBy=='desc'" [ngStyle]="{'height': value+ '%'}"></span>

Answer 1

You can use ngClass for that. Add class based on the conditional value.

[ngClass]="{orderBy=='asc'? 'someclass': 'otherclass'}"

You can write seperate styles for each of the class.

Answer 2

You can use ng-class to achieve this

ng-class="{' classname ':orderBy==='asc', ' classname ':orderBy==='desc'}"