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