Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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 (integer, string, and so on), a boolean, a JavaScript object, a component or collection, a controller method such as an action method, and other useful results.

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.

Important

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:

1swfobject.registerObject("clippy.codeblock-0", "9");var theLabel = cmp.get("v.label");

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

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:text value="{!"/>

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