Aura if else in lightning

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>

Let's see a simple example to understand how to display text based on condition using aura:if,

<aura:attribute name="Test" type="Boolean" default="True"/>

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

Hi,The value is true

</aura:attribute>

Now let's take another example to understand aura:if with else,

<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>

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

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

    Some text to display

    </aura:if>

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

<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 more example for aura:if,

STEP 1) Create the lightning component (Name = ifattribute.cmp).

<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>

STEP 2) Create a lightning app.

<aura:application extends="force:slds">

    <c:ifattribute/>

</aura:application>

Let's preview the application.

Hi,The value is true



TAGS:Aura if in lightning components,aura:if,aura:if Salesforce Lightning.