aura:if tag Lightning component example

aura:if tag Lightning component example

aura:if tag Lightning component example

aura if renders the content within the tag if the isTrue attribute evaluates to true. The framework evaluates the isTrue expression and instantiates components either in its body or else attribute.

Difference between aura if and aura renderIf

aura:if instantiates the components in either its body or the else attribute, but not both. aura:renderIf instantiates both the components in its body and the else attribute, but only renders one. If the state of isTrue changes, aura:if has to first instantiate the components for the other state and then render them. We recommend using aura:if instead of aura:renderIf to improve performance.

Example of using aura if

    <aura:attribute name="variable1" type="boolean" default="true"/>
    <aura:attribute name="variable2" type="boolean" default="false"/>
    <aura:attribute name="variable3" type="boolean" default="true"/>
    <aura:attribute name="variable4" type="boolean" default="false"/>
    
    <!--Example of aura:if-->
    <aura:if isTrue="{!v.variable1}">
        <div style="background-color:LightBlue">
    		This should be displayed as variable1 is true
        </div>
    </aura:if>

Example of aura if with aura set else attribute

Assuming that we have same 4 attributes available.

    <!--Example of aura:if with aura:set else attribute-->
    <aura:if isTrue="{!v.variable2}">
        <div style="background-color:LightBlue">
    		This should not be displayed as variable2 is false so else part will execute.
        </div>
        <aura:set attribute="else">
            <div style="background-color:LightBlue">
        		This should be displayed as if condition is not satisfied.
            </div>
    	</aura:set>
    </aura:if>

Example of using and condition with aura:if

    <!--Example of using AND condition with aura:if-->
    <aura:if isTrue="{!and(v.variable1, v.variable2)}" >
        <div style="background-color:LightBlue">
        	and Example. As variable1 is true and variable2 is false so nothing will be displayed.
        </div>
    </aura:if>

    <aura:if isTrue="{!and(v.variable1, v.variable3)}" >
        <div style="background-color:LightBlue">
        	and Example. As variable1 is true and variable3 is true so it will be displayed.
        </div>
    </aura:if>

Example of using or condition with aura if

    <!--Example of using OR condition with aura:if-->
    <aura:if isTrue="{!or(v.variable1, v.variable2)}" >
        <div style="background-color:LightBlue">
        	or Example. As variable1 is true and variable2 is false so it will be displayed.
        </div>
    </aura:if>
    <aura:if isTrue="{!or(v.variable2, v.variable4)}" >
        <div style="background-color:LightBlue">
        	or Example. As variable2 is false and variable4 is false so it will not be displayed.
        </div>
    </aura:if>

aura if multiple conditions

   <!--aura:if with complex or and condition-->
    <aura:if  isTrue="{!or(and(v.variable1, v.variable3) , v.variable2 ) }" >
        <div style="background-color:LightBlue">
            complex or and example. It will showup as variable1 is true, variable3 is true and variable2 is false
        </div>
    </aura:if>

aura if complete component example code

<aura:component >
    <aura:attribute name="variable1" type="boolean" default="true"/>
    <aura:attribute name="variable2" type="boolean" default="false"/>
    <aura:attribute name="variable3" type="boolean" default="true"/>
    <aura:attribute name="variable4" type="boolean" default="false"/>
    
    <!--Example of aura:if-->
    <aura:if isTrue="{!v.variable1}">
        <div style="background-color:LightBlue">
    		This should be displayed as variable1 is true
        </div>
    </aura:if>
    
    <!--Example of aura:if with aura:set else attribute-->
    <aura:if isTrue="{!v.variable2}">
        <div style="background-color:LightBlue">
    		This should not be displayed as variable2 is false so else part will execute.
        </div>
        <aura:set attribute="else">
            <div style="background-color:LightBlue">
        		This should be displayed as if condition is not satisfied.
            </div>
    	</aura:set>
    </aura:if>
    
    <!--Example of using AND condition with aura:if-->
    <aura:if isTrue="{!and(v.variable1, v.variable2)}" >
        <div style="background-color:LightBlue">
        	and Example. As variable1 is true and variable2 is false so nothing will be displayed.
        </div>
    </aura:if>
    
    <aura:if isTrue="{!and(v.variable1, v.variable3)}" >
        <div style="background-color:LightBlue">
        	and Example. As variable1 is true and variable3 is true so it will be displayed.
        </div>
    </aura:if>
    
    <!--Example of using OR condition with aura:if-->
    <aura:if isTrue="{!or(v.variable1, v.variable2)}" >
        <div style="background-color:LightBlue">
        	or Example. As variable1 is true and variable2 is false so it will be displayed.
        </div>
    </aura:if>
    <aura:if isTrue="{!or(v.variable2, v.variable4)}" >
        <div style="background-color:LightBlue">
        	or Example. As variable2 is false and variable4 is false so it will not be displayed.
        </div>
    </aura:if>
    
    <!--aura:if with complex or and condition-->
    <aura:if  isTrue="{!or(and(v.variable1, v.variable3) , v.variable2 ) }" >
        <div style="background-color:LightBlue">
            complex or and example. It will showup as variable1 is true, variable3 is true and variable2 is false
        </div>
    </aura:if>
    
</aura:component>

Sample App for LightningComponentAuraIfExample

<aura:application >
    <c:LightningComponentAuraIfExample/>
</aura:application>

aura if output will be

aura if tag Lightning component example output

For more detail please refer below official link

Salesforce Lightning Interview Questions

Happy Coding 🙂