Setting Dynamic style classes for Aura components

You really should be using aura:if for rendering elements:

<aura:if isTrue="{!v.IsTest}"><div>test</div></aura:if>

You don't need to compare a Boolean value to true, it's already true. That said, the following should also work:

<div class="{!v.IsTest? '': 'slds-hide'}">test</div>

There must be something else which is causing the issue. I am assuming test is of type Boolean.

Just to verify, I created a sample component and ternary expression, it worked fine. Below is the sample code

<aura:component >
    <aura:attribute name="test" type="Boolean" default="true" />
    <div class="{!v.test?'no-hello':'hello'}" /> 
</aura:component>

Here are the alternative ways you can do it:

  • By using if function within the expression

< div class="{! if ( v.test, 'no-hello' , 'hello' ) }" />

  • By using Aura:if