Supported Expression Types

Template expressions can contain any JavaScript expression that is valid in a template context. This topic enumerates and provides a wide range of examples of supported expression types. For some restrictions on expressions in an HTML template, see HTML Syntax Compatibility.

All JavaScript literal types are supported in template expressions.

While you don't need an expression to display a simple string in a template, string literals can be useful when composing user interface messages. See Template Literals.

All numeric literal formats are supported:

Template literals allow you to embed expressions inside string literals using ${} syntax.

Tagged template literals are also supported:

See Tagged Templates at MDN for additional details regarding tagged template literals.

Being too adventurous with tagged templates can lead to hard-to-understand template markup. Template expressions are intended to simplify your code. Take advantage of it.

Direct property access and member expressions are fully supported.

Conditional expressions using the ternary operator (? :) for dynamic content.

Logical AND (&&) and OR (||) operators for conditional rendering and fallback values.

Various unary operators are supported.

All binary operators are supported for various operations.

Expressions must be HTML compliant because they are parsed as HTML. The “<” character in text node expressions like {foo < bar} would be interpreted as the opening of an HTML tag, causing a parsing error. However, < is allowed in attribute expressions when properly quoted.

  • In text nodes: Use {bar > foo} instead of {foo < bar}
  • In attributes: {foo < bar} works when quoted: attr="{foo < bar}"

See HTML Syntax Compatibility for additional details.

Call methods and functions directly in templates.

Put your formatting functions in a separate API module component that you can easily import into any component that use them.

Optional chaining for function calls is supported.

Create and manipulate arrays inline.

Create object literals and access their properties.

Safe property access, and null and undefined handling.

Dynamic property access using bracket notation.

Arrow functions can be used for inline transformations and callbacks.

Assignment operations are allowed inside arrow functions.

Expressions work within iterator directives.

See Example: Render Lists with Template Expressions for an extended example and discussion of using iterators in template expressions.

Complex expressions work with LWC directives like if:true.