Use multiple conditions in aura:if on lightning component

Prerequisites : basic understanding of Lightning Components.

aura:if evaluates the isTrue expression on the server and instantiates components in either it’s 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 use multiple conditions  in isTrue attribute, but….
we can use logical Functions in aura:if tag like  or(), and() . in this sample code we can see how to use multiple Boolean conditions in aura:if tag.

 Use Multiple conditions sample code :

component [sample.cmp]

<aura:component >
   <aura:attribute name="ValueOneisTrue" type="boolean" default="true"/>
   <aura:attribute name="ValueTwoisFalse" type="boolean" default="false"/>
   <aura:attribute name="ValuethreeisTrue" type="boolean" default="true"/>
   <aura:attribute name="ValueFourisFalse" type="boolean" default="false"/>
 
  <!--aura:if sample -->
   <aura:if  isTrue="{!and(v.ValueOneisTrue, v.ValuethreeisTrue)}" >
      <div style="padding:15px; background-color:LightBlue">
         and ==> this div show because both attribute is true
      </div>
   </aura:if>
   <!--aura:if with aura:set sample-->
   <aura:if  isTrue="{!or(v.ValueFourisFalse, v.ValueTwoisFalse)}" >
      <div style="padding:15px; background-color:GreenYellow">
         or ==> this div show because one attribute is true
      </div>
      <aura:set attribute="else">
         <div style="padding:15px; background-color:GreenYellow">
            or ==> this aura:set div show because both attribute is false
         </div>
      </aura:set>
   </aura:if>
   <!--aura:if with nested and condition-->
   <aura:if  isTrue="{!or(and(v.ValueOneisTrue, v.ValuethreeisTrue) , v.ValueTwoisFalse ) }" >
      <div style="padding:15px; background-color:LightGreen  ">
         nested condition div show because in statment 1 of or()condition returns true.
      </div>
   </aura:if>
</aura:component>

TestApp.app

<aura:application >
  <c:sample/>
  <!-- here c: is org. namespace prefix-->
</aura:application>

Output-:

Bravo!! Like our facebook page for new post updates.