Lightning Components Developer Guide

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

Newer Version Available

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

aura:renderIf

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

Only consider using aura:renderIf if you expect to show the components for both the true and false states, and it would require a server round trip to instantiate the components that aren't initially rendered. Otherwise, use aura:if as it only creates and renders the markup in its body or the else attribute.

Attribute Name Type Description
else Component[] 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:renderIf> tag to conditionally display an edit button.

1<aura:attribute name="edit" type="Boolean" default="true">
2<aura:renderIf isTrue="{!v.edit}">
3    <ui:button label="Edit"/>
4    <aura:set attribute="else">
5        You can’t edit this.
6        <!-- Imagine some components here that need to be created on the server -->
7    </aura:set>
8</aura:renderIf>

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

We recommend using aura:if instead if the else attribute is rarely displayed or if it doesn’t include components that need to be created on the server.