Salesforce Docs Portal

Conditional Expressions

Here are examples of conditional expressions using the ternary operator and the <aura:if> tag.

Ternary Operator

This expression uses the ternary operator to conditionally output one of two values dependent on a condition.

<!-- otherprops: set_clipboard --> 
<a class="{!v.location == '/active' ? 'selected' : ''}" href="#/active">Active</a>

The {!v.location == '/active' ? 'selected' : ''} expression conditionally sets the class attribute of an HTML <a> tag, by checking whether the location attribute is set to /active. If true, the expression sets class to selected.

Using <aura:if> for Conditional Markup

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

<aura:attribute name="edit" type="Boolean" default="true"/>
<aura:if isTrue="{!v.edit}">
    <lightning:button label="Edit"/>
    <aura:set attribute="else">
        You can’t edit this.
    </aura:set>
</aura:if>

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

See Also