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



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

No comments:

Post a Comment