Conditional Rendering using aura:if

As we use aura:components, there will be times when we want to show or hide some component or text or table based on some condition. For example: if we are displaying a datatable based on a list of values. If the list is not empty, show the table otherwise, show a message that no results found.

<aura:component>
  <aura:attribute name="showText" type="boolean" default="true"/>  
  <aura:if isTrue="{!v.showText}"> 
    <!-- everything present here is rendered if showText is true -->
   <aura:set attribute="else">
    <!-- content renders if false -->
   </aura:set>
  </aura:if>
</aura:component>

The beauty of aura:if is when the isTrue condition is false the content doesn’t actually get created and hence never rendered. So, it will not consume time to create content and then hide it. So, that makes it even faster to render

How to use aura:if to check if List of values is empty or not

<aura:attribute name="tableColumns" type="List" default="[]"/>
   <aura:if isTrue="{!not(empty(v.instructorClassesData))}">    
         <aura:iteration var="session" items="{!v.instructorClassesData}" >
             <!-- Show data here  -->

          </aura:iteration>
                <aura:set attribute="else">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-size_2-of-2">
                            There are no Upcoming classes
                        </div>
                    </div>
                </aura:set>  
</aura:if>

Do try it out and let me know if you have any questions!!

Stay Safe, Stay Home

Learn Salesforce:-)