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.

The resulting value 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.

Note

Note

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 Lightning Component framework, {! is simply the delimiter used to begin an expression.

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

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.

Important

Important

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");

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.