Conditionally Renderings with aura:if

In this blog I am going to show how to use aura:if to conditionally instantiates and renders either the body or the components .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 any time with if condition. Below is the sample example how it looks like

<aura:component>
    <aura:if isTrue="{!v.truthy}">
    True
    <aura:set attribute="else">
      False
    </aura:set>
  </aura:if> 
</aura:component>

Simple If Conditions

The below code contains two attributes to test if conditions.one attribute is the boolean type and another attribute is of type List.

<aura:component >
    <aura:attribute name="flag" type="Boolean"/>
    <aura:attribute name="arry" type="List" default="[1, 2, 3]"/>
    <div>
        <aura:if isTrue="{!v.flag}">
            <div class="slds-box">
                <span class="itIsTrue">It is true.</span>
            </div>
        </aura:if>
        <aura:if isTrue="{! !v.flag}">
            <div class="slds-box">
                <span class="itIsFalse">It is not true.</span>
            </div>
        </aura:if>
        <aura:if isTrue="false">
            <div class="slds-box">
                <span class="itIsLiterallyFalse">It is literally false.</span>
            </div>
        </aura:if>
        <aura:if isTrue="true">
            <div class="slds-box">
                <span class="itIsLiterallyNotFalse">It is literally not false.</span>
            </div>
        </aura:if>
    </div>
    <div>
        <aura:if isTrue="{!v.arry.length }">
            <div class="slds-box">
                Truthy
                <aura:set attribute="else">
                    Falsey
                </aura:set>
            </div>
        </aura:if>
    </div>
    
</aura:component>

Here is the simple App for testing. The first time when the component is instantiated we are setting the flag to false and array size is greater than zero.The second time we are getting the flag to true and array to empty.

<aura:application extends="force:slds">
    <div class="slds-box slds-theme--alt-inverse">
        <c:IFMaster flag ="false" arry="[1, 2, 3]"/>    
    </div>
    <div class="slds-box slds-theme--info">
        
        <c:IFMaster flag ="true" arry=""/>    
    </div>
</aura:application>

 Simple If Else

In this below code just I am using one flag to test if and else conditions. You can see an output with both the condition if the flag is true or false.

<aura:component >
    <aura:attribute name="flag" type="Boolean"/>
    
    <span aura:id="whatIsIt">
        <aura:if isTrue="{!v.flag}">
            <span>It is true.</span>
            <aura:set attribute="else">
                <span>It wishes it was true.</span>	
            </aura:set>
        </aura:if>
        <br/>
        <aura:if isTrue="{! !v.flag}">
            <span>It is not true.</span>
            <aura:set attribute="else">
                <span>It wishes it was not true.</span>	
            </aura:set>
        </aura:if>
    </span>
    
</aura:component>

Here is the simple App to invoke the component. When you set the flag as false it will display the false message as true condition and else message is coming from the else condition.

<aura:application extends="force:slds">
    <div class="slds-box slds-theme--alt-inverse">
        <c:IFMaster flag ="false" />    
    </div>
   
</aura:application>
When you set the flag as true
<aura:application extends="force:slds">
    <div class="slds-box slds-theme--alt-inverse">
        <c:IFMaster flag ="true" />    
    </div>
   
</aura:application>

 

Nested If Else

 The below code we have two attributes to show the outer and inner if conditions.
<aura:component >
    <aura:attribute name="outer" type="Boolean"/>
    <aura:attribute name="inner" type="Boolean"/>
    <span aura:id="whatIsIt">
        <aura:if isTrue="{!v.outer}">
            <span class="outerIsTrue">
                <span> Outer Is True. </span>
                <aura:if isTrue="{!v.inner}">
                    <span >Inner is true.</span>
                    <aura:set attribute="else">
                        <span >Inner is False .</span>   
                    </aura:set>
                </aura:if>
                <aura:if isTrue="{! !v.inner}">
                    <span >Inner  is not true.</span>
                    <aura:set attribute="else">
                        <span >Inner is true. </span>    
                    </aura:set>
                </aura:if>
            </span> 
            <aura:set attribute="else">
                <span >
                    Outer is Else .                   
                </span>         
            </aura:set>
        </aura:if>
    </span>   
</aura:component>
If you set both outer and inner attributes to the .it will display the data as shown below.
<c:IFMaster outer ="true" inner="false" />

If Else with Iteration 

The below code shows how to Iterate over the list and display the data based on the attribute “showEven”.

<aura:component >
    <aura:attribute name="arr" type="List"  default="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"/>
    <aura:attribute name="start" type="integer" default="4"/>
    <aura:attribute name="end" type="integer" default="14"/>
    <aura:attribute name="showEven" type="Boolean" default="true"/>
    
    <div class="container" aura:id="container">
        <aura:iteration aura:id="temo" items="{!v.arr}" var="number" indexVar="index" start="{!v.start}" end="{!v.end}">
            <div aura:id="simple" class="{!'row row'+index}">
                <aura:if isTrue="{!v.showEven}">
                    <aura:if isTrue="{! (mod(index,2)==0) ? 'true':'false'}">
                        index#{!index}:{!number}
                    </aura:if>
                    <aura:set attribute="else">
                        <aura:if isTrue="{! (mod(index,2)==1) ? 'true':'false'}">
                            index#{!index}:{!number}
                        </aura:if>   
                    </aura:set>
                </aura:if>
                
            </div>
        </aura:iteration>
    </div>
    
    
    
</aura:component>

If you set “showEven” to false it will display only odd numbers as shown below.

        <c:IFMaster showEven="false"/>    

If Else with Server Side Controller 

Simple Apex code that will return false

public class ServerSideCls {
    @AuraEnabled
    public static boolean showMessage(){
        return false ;
    }
    
}

Component

<aura:component  controller="ServerSideCls">
    
    <aura:attribute name="flag" type="Boolean"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="container" aura:id="container">
        <aura:if isTrue="{!v.flag}">
            Server is Returning true 
            <aura:set attribute="else">
                Server is returning false .
            </aura:set>
        </aura:if>
    </div>
</aura:component>
({
    doInit: function(component, evt) {
        var action = component.get("c.showMessage");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.flag", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    
})

When you invoke this component, it will display the message based value return from the server side code.