Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

aura:if

aura:if renders the content within the tag if the isTrue attribute evaluates to true.

The framework evaluates the isTrue expression and instantiates components either in its body or else attribute.

aura:if instantiates the components in either its body or the else attribute, but not both. aura:renderIf instantiates both the components in its body and the else attribute, but only renders one. If the state of isTrue changes, aura:if has to first instantiate the components for the other state and then render them. We recommend using aura:if instead of aura:renderIf to improve performance.

Note

Attribute Name Type Description
else ComponentDefRef[] The markup to render when isTrue evaluates to false. Set this attribute using the aura:set tag.
isTrue string Required. An expression that determines whether the content is displayed. If it evaluates to true, the content is displayed.

Example

This snippet of markup uses the <aura:if> tag to conditionally display an edit button.

1<aura:attribute name="edit" type="Boolean" default="true"/>
2<aura:if isTrue="{!v.edit}">
3    <ui:button label="Edit"/>
4    <aura:set attribute="else">
5        You can’t edit this.
6    </aura:set>
7</aura:if>

If the edit attribute is set to true, a ui:button displays. Otherwise, the text in the else attribute displays.