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.

{!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:

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

Important

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

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

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