In Salesforce Lightning, you can use the “aura:if” tag to conditionally display markup. This is a useful tool to use when you want to show or hide elements. On a page based on certain conditions.
The ” aura:if” tag has two attributes: “isTrue” and “else”. The “isTrue” attribute accepts a Boolean value that determines. Whether or not the markup enclose in the “aura:if” tag will be render. The “else” attribute is optional and can be use to specify alternative markup. To render if the “isTrue” condition evaluates to false.
Here’s an example of how the “aura:if” tag can be use:
<aura:if isTrue=”{!v.isLoggedIn}”>
<p>Welcome, {!v.userName}!</p>
</aura:if>
In the example above, the “is log in” variable is use to determine. Whether or not the user is log in. If the user is log in, the “aura:if” tag will render the welcome message. If the user is not log in, nothing will be render.
by using the “or” operator.
<aura:if isTrue=”{!v.isLoggedIn || v.isGuest}”>
<p>Welcome!</p>
</aura:if>
Explanation
In the example above, the “is log in” variable is use to determine. Whether or not the user is log in. If the user is log in, the “aura:if” tag will render the welcome message.
by using the “and” operator:
<aura:if isTrue=”{!v.isLoggedIn && v.isVerified}”>
<p>Welcome, {!v.userName}!</p>
</aura:if>
Explanation
In the example above, the “is log in” and “is verified” variables are use to determine. Whether or not the user is log in and has a verify account. If both conditions are meet, the “aura:if” tag will render the welcome message. If either condition is not meet, nothing will be render.
by nesting “aura:if” tags:
<aura:if isTrue=”{!v.isLoggedIn}”>
<aura:if isTrue=”{!v.isVerified}”>
<p>Welcome, {!v.userName}!</p>
</aura:if>
</aura:if>
Explanation
In the example above, the “is log in” variable is use to determine. Whether or not the user is log in. The user is log in, the “is verified” condition is evaluate. If both conditions are meet, the “aura:if” tag will render the welcome message. If either condition is not meet, nothing will be render.
by using the “or” and “and” operators together:
<aura:if isTrue=”{!v.isLoggedIn || (v.isGuest && v.isVerified)}”>
<p>Welcome!</p>
</aura:if>
Explanation
In the example above, the “is log in” variable is use to determine. Whether or not the user is log in. If the user is log in, the “aura:if” tag will render the welcome message. If the user is not log in but is a guest and has a verify account. The “aura:if” tag will still render the welcome message.
by using the “not” operator:
<aura:if isTrue=”{!v.isLoggedIn && !v.isGuest}”>
<p>Welcome, {!v.userName}!</p>
</aura:if>
Explanation
In the example above, the “is log in” and “is guest” variables are use. To determine whether or not the user is log in and is a guest. If the user is log in and is not a guest, the “aura:if” tag will render the welcome message. If either condition is not meet, nothing will be render.
by using the “or” operator and nesting “aura:if” tags:
<aura:if isTrue=”{!v.isLoggedIn || v.isGuest}”>
<aura:if isTrue=”{!v.isVerified}”>
<p>Welcome, {!v.userName}!</p>
</aura:if>
</aura:if>
In the example above, the “is log in” and “is verify” variables are use to determine. Whether or not the user is log in and has a verify account. If the user is log in or is a guest and has a verify account. The “aura:if” tag will render the welcome message. If either condition is not meet, nothing will be render.
Conclusion:
The “aura:if” tag is a powerful tool that can be use to conditionally render content in a Lightning component. It can be use with multiple conditions, and the conditions can be nest. This makes it important to carefully consider what conditions you want to use. And how they will affect the output of your component
