Aura if in lightning components

Aura:if is used to display the content based on condition.If the condition is true the content is rendered.

Syntax:

<aura:if isTrue="{!v.attributeName}">

</aura:if>


aura:if start

<aura:attribute name="Test" type="Boolean" default="True"/>
<aura:if isTrue="{!v.Test}">
Hi,The value is true
</aura:attribute>

aura:if end


aura:if with else start
<aura:attribute name="Test" type="Boolean" default="True"/>
<aura:if isTrue="{!v.Test}">
Hi,The value is true
<aura:set attribute="else">
Hi,The value is false
</aura:set>
</aura:if>

aura:if with else end


aura:if supports or(),end() in isTrue expression.

syntax:


A)  <aura:if isTrue="{!or(v.attributeName1,v.attributeName1)}"
    Some text to display
    </aura:if>

The above will rendered the text if one of the attribute is true.

B)

    <aura:if isTrue="{!and(v.attributeName1,v.attributeName1)}"
    Some text to display
    </aura:if>

The above will rendered the text if both the attribute are true.

 Let's see one simple example for aura:if

1)Create the lightning component.

<aura:component >

<aura:attribute name="Test" type="Boolean" default="True"/>
<aura:if isTrue="{!v.Test}">
Hi,The value is true
<aura:set attribute="else">
Hi,The value is false
</aura:set>
</aura:if>
 
</aura:component>


2)Create lightning app

<aura:application extends="force:slds">
    <c:ifattribute/>
</aura:application>


Output:
Hi,The value is true
**************************************************************************************************************
TAGS:Aura if in lightning components,aura:if,aura:if Salesforce Lightning.
**************************************************************************************************************