Tuesday, February 8, 2022

How to Use multiple conditions in aura:if on lightning component

 Hello Friends as we know aura: if  on lightning component for rendering section/div. lets check in details

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

Sample code for  how to use multiple Boolean conditions in aura:if tag.


<aura:component >
   <aura:attribute name="FlagOneisTrue" type="boolean" default="true"/>
   <aura:attribute name="FlagTwoisFalse" type="boolean" default="false"/>
   <aura:attribute name="FlagthreeisTrue" type="boolean" default="true"/>
   <aura:attribute name="FlagFourisFalse" type="boolean" default="false"/>
 
  <!--aura:if sample code with and -->
   <aura:if  isTrue="{!and(v.FlagOneisTrue, v.FlagthreeisTrue)}" >
      <div style="padding:15px; background-color:LightBlue">
         Out Come ==> this div show because both attribute is true beacse we use and
      </div>
   </aura:if>
   <!--aura:if with aura:set sample with or-->
   <aura:if  isTrue="{!or(v.FlagFourisFalse, v.FlagTwoisFalse)}" >
      <div style="padding:15px; background-color:GreenYellow">
          Out Come  ==> this div show because one attribute is true,beacse we use or
      </div>
      <aura:set attribute="else">
         <div style="padding:15px; background-color:GreenYellow">
             Out Come  ==> this aura:set div show because both attribute is false
         </div>
      </aura:set>
   </aura:if>
   <!--aura:if with nested and condition  with and along with or-->
   <aura:if  isTrue="{!or(and(v.FlagOneisTrue, v.FlagthreeisTrue) , v.FlagTwoisFalse ) }" >
      <div style="padding:15px; background-color:LightGreen  ">
        Out Come ===>  nested condition div show because in statment 1 of or()condition returns true.
      </div>
   </aura:if>
</aura:component>