Example Expressions

Dynamic Output

The simplest way to use expressions is to simply output them. Values used in the expression can be from component attributes, literal values, booleans, and so on.

1swfobject.registerObject("clippy.codeblock-0", "9");<p>{!v.desc}</p>

In the expression {!v.desc}, v represents the view, which is the set of component attributes, and desc is an attribute of the component. The expression is simply outputting the desc attribute value for the component that contains this markup.

If you're including literal values in expressions, enclose text values within single quotes, such as {!'Some text'}.

Include numbers without quotes, for example, {!123}.

For booleans, use {!true} for true and {!false} for false.

Passing Values

Use expressions to pass values around. For example:

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:iteration items="{!v.expenses}" var="expense">

The {!v.expenses} expression passes the expenses attribute to the aura:iteration tag. The expression is not evaluated yet. When the aura:iteration tag renders, it evaluates the expression to retrieve the items value.

1swfobject.registerObject("clippy.codeblock-2", "9");<ui:button aura:id="newNote" label="New Note" press="{!c.createNote}"/>

The expression {!c.createNote} is used to assign a controller action to the press attribute of a button component. c represents the controller for the component, and createNote is the action.

Conditional Expressions

Although conditional expressions are really just a special case of the previous two, it's worth seeing a few examples.

1swfobject.registerObject("clippy.codeblock-3", "9");<a class="{!v.location == '/active' ? 'selected' : ''}" href="#/active">Active</a>

The expression {!v.location == '/active' ? 'selected' : ''} is used to conditionally set 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.

1swfobject.registerObject("clippy.codeblock-4", "9");<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>

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