Monday, September 17, 2018

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

1 comment:

  1. Reading everything here because it is deeply explained.... Thanks to blogger

    ReplyDelete