Lightning Client Side Iteration and Map :

This lesson teaches about Conditional rendering by Aura:If , Aura:Else

Aura:If is used to conditionally render html in lightning
If the condition succeed's , the inner html is rendered , else it doesn't

The condition for aura:If can be simple attribute usage or complex (and,or) logics on attributes

Create a lightning component with the below markup code and name the component as AuraIfElseDemo 

<!--


 * created by 		:		Shiva RV
 * Date				:		13-10-2018
 * Description		:		Aura If Else component
  
-->

<aura:component >
    <aura:attribute name="isTruth" type="Boolean" default="true"></aura:attribute>
    <aura:attribute name="intTypeAtt" type="Integer" default="1"></aura:attribute>

	<aura:if isTrue="{!v.isTruth}">
        <div style="background-color:blue">
           The Attribute is set True, Congrats you are seeing the if block
            </div>
    <aura:set attribute="else">
        <div style="background-color:green">
		Oops the attribute is set False , you can now see the else block
        </div>
    </aura:set>
  </aura:if> 
    
    
</aura:component>
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:If ,Else -->
    	<h1>Component Block With isTrue set as true </h1>
    	<c:AuraIfElseDemo isTruth="true"></c:AuraIfElseDemo>
    	<br/>
        <h1>Component Block With isTrue set as false </h1>
    	<c:AuraIfElseDemo isTruth="false"></c:AuraIfElseDemo>
    
</aura:application>
Output:
Key Notes :
*Once an aura:if is false ,all the html dom inside that is destroyed , thus dom access will fail post.
eg :
 <aura:If condition="some condition">
<div id="hello">
</aura:> , if hello is accessed in js ,will throw an error if aura:if is false, else the code works fine