How to Use Multiple condtions in aura:if tag-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 isTrue="{!and(v.ValueOneisTrue, v.ValuethreeisTrue)}" >

and ==> this div show because both attribute is true

</div>

</aura:if>

<aura:if isTrue="{!or(v.ValueFourisFalse, v.ValueTwoisFalse)}" >

or ==> this div show because one attribute is true

</div>

<aura:set attribute="else">

or ==> this aura:set div show because both attribute is false

</div>

</aura:set>

</aura:if>

<aura:if isTrue="{!or(and(v.ValueOneisTrue, v.ValuethreeisTrue) , v.ValueTwoisFalse ) }" >

nested condition div show because in statment 1 of or()condition returns true.

</div>

</aura:if>

</aura:component>

TestApp.app

<aura:application >

<c:sample/>

</aura:application>

Output-:

use Multiple conditions in aura:if image — output

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

2 comments

RKK says:

October 25, 2018 at 7:45 pm

Is there a way to check multiple values without hard coding the values

<aura:if isTrue=”{!(v2.Name == ‘Q-003’ || v2.Name == ‘Q-005’ || v2.Name == ‘Q-006’ || v2.Name == ‘Q-009’|| v2.Name == ‘Q-016’ || v2.Name == ‘Q-017’|| v2.Name == ‘Q-023’ || v2.Name == ‘Q-024’)}” >

- Anonymous says:
  
  December 21, 2018 at 7:50 pm
  
  @RKK Yes, but the place to do that check isn’t within the aura:if ‘isTrue’ parameter.
  
  Instead, within the Javascript controller, create a list holding all your hardcoded values, compare v2.Name to that list, and store the result of the comparison as a boolean attribute on your component. Then your aura:if isTrue check can be directly on that boolean