In this blog we are going to learn about conditional statement in lightning component. By using<aura:if> tag we can create html element conditionally without using controller either client side or server side. Let’s learn how to do this.
Conditional Statement Attributes
1). isTrue : This attribute is used with aura:if tag and accepts only true or false value.
2). else : This attribute is used with aura:set tag. This attribute is used to render the body when value of isTrue expression is false.
Conditional Statement Example
Let’s create a text box in which you enter true or false and on the basis of entered value(only true or false is allowed) we can dynamically show the component.
Step1 : Create a component which appear when entered value is true.
<aura:component implements="force:appHostable" > <div> Hey!! You have entered true... </div> </aura:component>
Step2 : Create a component which appear when entered value is false.
<aura:component implements="force:appHostable" > <div> Hey!! You have entered false... </div> </aura:component>
Step3 : Create component to show the above two component on the basis of condition.
<aura:component implements="force:appHostable,
flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId"
access="global" extensible="true">
<aura:attribute name="Display" default="true" type="boolean" />
<ui:inputText value="{!v.Display}" />
<aura:if isTrue="{!v.Display}">
<c:ifTrue />
<aura:set attribute="else">
<c:ifFalse />
</aura:set>
</aura:if>
</aura:component>
Output
#When entered value is true.
#When entered value is false.
Support
That’s all for conditional statement in lightning component , still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to contact us, we will be happy to help you https://wedgecommerce.com/contact-us/.