Lightning - Aura:if

aura:if

aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. 
Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other 

<aura:if isTrue="{!v.truthy}">
  If true process this piece of code
    <aura:set attribute="else">
     If false process this piece of code
    </aura:set>
</aura:if> 

Component
*************************************************************************************************************
<aura:component >
    <aura:attribute name="FirstName" type="String" />
    <aura:attribute name="LastName" type="String" />
    <aura:attribute name="DateOfBirth" type="Date" />
    <aura:attribute name="Email" type="String" />
    <aura:attribute name="Phone" type="String" />
    <aura:attribute name="flag" type="Boolean" default="true" />    
    <lightning:card iconName="standard:lead">
    	<aura:set attribute="actions">
        	<lightning:buttonGroup>
                <lightning:button label="Submit" onclick="{!c.demo}"/>
            </lightning:buttonGroup>
        </aura:set>
        <aura:set attribute="title">
            Personal Data<br/>
            Basic Information
        </aura:set>
        <aura:set attribute="footer">
            <lightning:badge label="All Information is protected"/> 
        </aura:set>
        <aura:if isTrue="{!v.flag}">
                <lightning:input label="Enter First Name" aura:id="firstname" name="firstName" required="true" /> 
                <lightning:input label="Enter Last Name" aura:id="lastname" name="lastName" required="true" />
                <lightning:input label="Enter Date Of Birth" type="Date" aura:id="dob" name="dob" required="true" />
                <lightning:input label="Enter Email" aura:id="email" name="email" required="true" />
                <lightning:input label="Enter Phone" aura:id="phone" name="phone" required="true" />   
            <aura:set attribute="else">   
                First Name: {!v.FirstName}<br/>
                Last Name: {!v.LastName}<br/>
                DateOfBirth: {!v.DateOfBirth}<br/>
                Last Email: {!v.Email}<br/>
                Last Phone: {!v.Phone}
            </aura:set> 
         </aura:if>
    </lightning:card>
</aura:component>
*************************************************************************************************************

Controller
*************************************************************************************************************
({
	demo : function(component, event, helper) {
		var fname = component.find("firstname").get("v.value");
        var lname = component.find("lastname").get("v.value");
        var dob = component.find("dob").get("v.value");
        var email = component.find("email").get("v.value");
        var phone = component.find("phone").get("v.value");
        if(phone!=null)
            component.set("v.flag", false);
        
        component.set("v.FirstName",fname);
        component.set("v.LastName",lname);
        component.set("v.DateOfBirth",dob);
        component.set("v.Email",email);
        component.set("v.Phone",phone);
	}
})
*************************************************************************************************************