Using Expressions

Expressions allow you to make calculations and access property values and other data within component markup. Use expressions for dynamic output or passing values into components by assigning them to attributes.

An expression is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value. Method calls are not allowed in expressions.

The expression syntax is: {!expression}

expression is a placeholder for the expression.

Anything inside the {! } delimiters is evaluated and dynamically replaced when the component is rendered or when the value is used by the component. Whitespace is ignored.

If you’re familiar with other languages, you may be tempted to read the ! as the “bang” operator, which negates boolean values in many programming languages. In the Aura Components programming model, {! is simply the delimiter used to begin an expression.

If you’re familiar with Visualforce, this syntax will look familiar.

Note

Here’s an example in component markup.

1{!v.firstName}

In this expression, v represents the view, which is the set of component attributes, and firstName is an attribute of the component. The expression outputs the firstName attribute value for the component.

The resulting value of an expression can be a primitive, such as an integer, string, or boolean. It can also be a JavaScript object, a component or collection, a controller method such as an action method, and other useful results.

There is a second expression syntax: {#expression}. For more details on the difference between the two forms of expression syntax, see Data Binding Between Components.

Identifiers in an expression, such as attribute names accessed through the view, controller values, or labels, must start with a letter or underscore. They can also contain numbers or hyphens after the first character. For example, {!v.2count} is not valid, but {!v.count} is.

Only use the {! } syntax in markup in .app or .cmp files. In JavaScript, use string syntax to evaluate an expression. For example:

1var theLabel = cmp.get("v.label");

Important

If you want to escape {!, use this syntax:

1<aura:text value="{!"/>

This renders {! in plain text because the aura:text component never interprets {! as the start of an expression.

Dynamic Output in Expressions

The simplest way to use expressions is to output dynamic values.
Conditional Expressions

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

When you add a component in markup, you can use an expression to initialize attribute values in the component based on attribute values of the container component. There are two forms of expression syntax, which exhibit different behaviors for data binding between the components.
Value Providers

Value providers are a way to access data. Value providers encapsulate related values together, similar to how an object encapsulates properties and methods.
Expression Evaluation

Expressions are evaluated much the same way that expressions in JavaScript or other programming languages are evaluated.
Expression Operators Reference

The expression language supports operators to enable you to create more complex expressions.
Expression Functions Reference

The expression language contains math, string, array, comparison, boolean, and conditional functions. All functions are case-sensitive.