Lightning Css Hide vs AuraIF Hide:

This lesson teaches about Hiding html using css vs Aura:If conditional Rendering

Aura:If removes the html element from the dom
Css change only hides the component, hence it mayn't be visible in screen ,but it functions in the same way
In the example ,you can see one <p> and lightning button , which is hidden and shown in the screen using css method and aura:if method

<!--


 * created by 		:		Shiva RV
 * Date				:		23-10-2018
 * Description		:		Difference between css hide and aura:If

  
-->
<aura:component >
    <!-- start of attribute declaration -->
    <aura:attribute name="isVisibleParagraph" type="Boolean" default="true"></aura:attribute>
    <aura:attribute name="isVisibleButton" type="Boolean" default="true"></aura:attribute>
	    
    <!-- end of attribute declaration -->
	<div class="slds-grid slds-grid_vertical-align-center">
  <div class="slds-col">
    <span>
      This is Hide type
        <br/>
    <p aura:id="textType1">Now you see me Method 1</p>
    <lightning:button aura:id="buttonType1Id" label="visible button"/>
	<br/>
    <br/>  
    <lightning:button label="Css Hide Both"  onclick="{!c.hideElementCss}"/>
    <lightning:button label="Css Show Both"  onclick="{!c.showElementCss}"/>
        <br/>
      	<lightning:button label="finding css hide Elements"  onclick="{!c.findElementAfterCssClose}"/>

      </span>
  </div>
  <div class="slds-col">
    <span>
      
    This is Aura:If type
    <aura:If isTrue="{!v.isVisibleParagraph}">
    <p aura:id="textType2">Now you see me Method 2</p>
    </aura:If>
    
    <aura:If isTrue="{!v.isVisibleButton}">
    <lightning:button aura:id="buttonType2Id" label="visible button"/>
    </aura:If>
 	<br/>
    <br/>    
    <lightning:button label="Aura Hide Both"  onclick="{!c.auraHideMethod}"/>
    <lightning:button label="Aura Show Both"  onclick="{!c.auraShowMethod}"/>
       <br/>
    <lightning:button label="finding aura hide Elements"  onclick="{!c.findElementAfterAuraClose}"/>

    <br/>  
    </span>
  </div>
    </div>
    
    
</aura:component>

 Js controller code :

({
	showElementCss : function(component, event, helper) {
                var textComp = component.find("textType1");
        		$A.util.removeClass(textComp, 'slds-hide');
				var buttonComp = component.find("buttonType1Id");
    			$A.util.removeClass(buttonComp, 'slds-hide');
	},
    
    hideElementCss : function(component, event, helper) {
                var textComp = component.find("textType1");
        		$A.util.addClass(textComp, 'slds-hide');
				var buttonComp = component.find("buttonType1Id");
    			$A.util.addClass(buttonComp, 'slds-hide');
	},
    
    auraHideMethod:function(component, event, helper) {
        component.set("v.isVisibleParagraph",false);
        component.set("v.isVisibleButton",false);

    },
    auraShowMethod:function(component, event, helper) {
        component.set("v.isVisibleParagraph",true);
        component.set("v.isVisibleButton",true);

    },
    
    findElementAfterCssClose:function(component, event, helper)
    {
      var paragraphValue=  component.find("textType1").getElement().textContent;
	  var buttonLabel=component.find("buttonType1Id").get("v.label");
       alert("All Details are accessible even if it's hidden by js..paragraph detail is "+paragraphValue +" \n button Label is "+buttonLabel );
    },
    
    findElementAfterAuraClose:function(component, event, helper)
    {
        try
        {
            var paragraphValue=  component.find("textType2").getElement().textContent;
	  		var buttonLabel=component.find("buttonType2Id").get("v.label");
       		alert("Details are available only if it's not hidden..paragraph detail is "+paragraphValue +" \n button Label is "+buttonLabel );

        }
        catch(e)
        {
            alert("sorry you can't find the elements , since aura:if won't even render the dom element");
        }
    },
    
    
})
Below is the hello world App code:
<!--


 * created by 		:		Shiva RV
 * Date				:		13-10-2018
 * Description		:		Hello World Lighting App
  
-->

<aura:application extends="force:slds">
<!--this is the lightning app where you can place html codes , associate js code
		also can embed lightning component to it -->
  
    
<!--Aura hide , show vs Aura:IF difference Example-->
		<c:HideCSSVsAuraIf></c:HideCSSVsAuraIf>
</aura:application>
Output:

 

 

 

Key Notes :
*You can see the finding elements works  fine if hidden using css , but it fails when hidden using aura:if method
Because aura:if destroys the html element inside it from the dom and hence it's never accessible