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.
Reading everything here because it is deeply explained.... Thanks to blogger
ReplyDelete