Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Create Lightning Components in the Developer Console
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Dynamic Output in Expressions
Conditional Expressions
Data Binding Between Components
Value Providers
Expression Evaluation
Expression Operators Reference
Expression Functions Reference
Using Labels
Localization
Providing Component Documentation
Working with Base Lightning Components
Working with UI Components
Supporting Accessibility
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

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.

1<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.

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.