Salesforce Lightning Use of aura:if

Use of <aura:if> is very critical in salesforce lightning when displaying UI components conditionally.

 Please note the markup in the <aura:if> will not be initiated until the condition is met.

for example:

<aura:component>

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

<ui:inputText aura:id="comments" value="{!v.passComments}" />

<aura:set attribute="else">

<ui:inputText aura:id="comments" value="{!v.failComments}" />

</aura:set>

</aura:if>

</aura:component>


In the above markup please note both the inpuText markup in if and else sections has same aura:id for comments. it is possible to use same id for inputText markup in if and else condition only because the salesforce DOM structure will not recognize the aura:id until the condition is satisfied.

This will allow us to use the same aura:id reference in controller js file. By doing this we can eliminate some extra code.