Our Blog

How to use Aura:if in Salesforce Lightning

aura:if check the isTrue expression and instantiates components in either its body or else attribute dependeding on the condition. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other
aura:if can only instantiates the components in either its body or the else attribute, but not both.

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

 <aura:component>
        <aura:attribute name="webkul" type="boolean" default="false" />
        <aura:if isTrue="{!v.webkul}">
            True
            <aura:set attribute="else">
                False
            </aura:set>
        </aura:if>
  </aura:component>

Or we can evaluates isTrue expression by evaluating in expression it self

<aura:component>    
    <aura:attribute name="webkul" type="integer" default="5" />  
      <aura:if isTrue="{!v.webkul == 5}">  
           True     
        <aura:set attribute="else"> 
          False           
      </aura:set>     
   </aura:if>   
 </aura:component>

In Some case, when many components are loading as content, aura:if reduces the volume of components that need to get created at the time, therefore increasing speed and performance of your application.

aura:if tag are also be used in place off .css hide property to hide any div or text ,if smartly used it could become very handy

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

 <aura:component>

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

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

            <div> Hello World</div>

        </aura:if>

  </aura:component>

 

To hide any Text  just placed it in to aur:if like example below

 <aura:component>

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

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

            Hello World!!!!!!!!!!!

        </aura:if>

 </aura:component>

 

In above example div and text will only be visible when isTrue is true ,else they will be hidden.

Leave a Comment

Comments (0)

Please verify that you are not a robot.

css.php