Tag Archives: Salesforce

Multiple Conditions in aura:if on Lightning Component

aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other.

In aura:if tag we can not use &&,AND,||,OR operator for multiple conditions in isTrue attribute, but we can use logical functions in aura:if tag like or(), and().

Here is the example how to use multiple Boolean conditions in aura:if tag.

Lightning Component:

<!--Sample.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Declare Attributes-->
    <aura:attribute name="attribute1" type="boolean" default="true"/>
    <aura:attribute name="attribute2" type="boolean" default="false"/>
    <aura:attribute name="attribute3" type="boolean" default="true"/>
    <aura:attribute name="attribute4" type="boolean" default="false"/>
    
    <!--Component Start--> 
    <div class="slds-m-around--xx-large">
        <!--aura:if with and condition-->
        <aura:if  isTrue="{!and(v.attribute1, v.attribute3)}" >
            <p><strong>Both attributes are true</strong></p>
        </aura:if>
        <!--aura:if with aura:set-->
        <aura:if  isTrue="{!or(v.attribute4, v.attribute2)}">
            <p><strong>Only One attribute is true</strong></p>
            <aura:set attribute="else">
                <p><strong>Both attributes are false</strong></p>
            </aura:set>
        </aura:if>
        <!--aura:if with nested and condition-->
        <aura:if  isTrue="{!or(and(v.attribute1, v.attribute3), v.attribute2)}" >
            <p><strong>One of or condition returns true</strong></p>
        </aura:if>
    </div>
    <!--Component End-->
</aura:component>

Output: