Conditional Rendering in Lightning Component using aura:if tag

Here is the basic example for iterating a collection or list of values in lightning component using aura:iteration tag.

Step 1:
Open Developer Console

Step 2:
Click File --> New --> Lightning Component --> Enter name as "ConditionalComponent" and Submit.

Clear the existing code and paste the below one,

1. <aura:component >
2.     <aura:attribute name="edit" type="Boolean"/>
3.     <aura:if isTrue="{!v.edit}">
4.         <ui:button label="Edit" />
5.         <aura:set attribute="else">
6.             <ui:button label="Edit" disabled="true"/>
7.         </aura:set>
8.     </aura:if>
9. </aura:component>

Step 3:

Use existing app or new one and paste the below code.

For "edit" attribute i set attribute value as true in the below code. In this case button will be visible, if you set "edit" attribute as false, Button will will disabled.

1. <aura:application >
2.     <c:ConditionalComponent edit="true"/>
3. </aura:application>

For True condition, set attribute value as below,

1.     <c:ConditionalComponent edit="true"/>

For False condition, set attribute value as below,

1.     <c:ConditionalComponent edit="false"/>