How to use Aura:if in Salesforce Lightning Component

The aura:if tag acts like a container for content that will only show if an isTrue condition is met.

Syntax:-

<aura:component>
    <aura:if isTrue="{!v.truthy}">
    True
    <aura:set attribute="else">
      False
    </aura:set>
  </aura:if> 
</aura:component>

Attributes:-

This is useful for things like conditionally displaying a picture or icon within a component. For example think of an account status signal. You can conditionally display a red or green light here for a quick visual indicator.

Example

======

1. we can evaluates isTrue expression by passing value from attribute of boolean type




<aura:component>

       <aura:attribute name="imyValue" type="boolean" default="false" />

       <aura:if isTrue="{!v.imyValue}">

           True

           <aura:set attribute="else">

               False

           </aura:set>

       </aura:if>

 </aura:component>

2.  we can evaluates isTrue expression by evaluating in expression it self

<aura:component>   

    <aura:attribute name="imyValue" type="integer" default="10" /> 

      <aura:if isTrue="{!v.imyValue== 10}"> 

           True    

        <aura:set attribute="else">

          False          

      </aura:set>    

   </aura:if>  

 </aura:component>

3. To hide any div just placed it in to aura:if like example below.

<aura:component>

 

       <aura:attribute name="imyValue" type="boolean" default="false" />

 

       <aura:if isTrue="{!v.imyValue}">

 

           <div> Hello World</div>

 

       </aura:if>

 

 </aura:component>

Happy Coding Sharing Is caring. 😀😀😀