Skip to content

Expressions

Overview

An expression is a JavaScript snippet assigned to a component property that Bellini evaluates to produce the property's value. Expressions are the mechanism behind all data binding — they read from declarations and services to keep the UI in sync with application state.

What You Will Learn

  • How to open and use the Expression Editor
  • What JavaScript syntax is supported in Bellini expressions
  • Common expression patterns for binding properties to declarations and services
  • When to use a function declaration instead of an inline expression

When To Use This

Use this when you need to write an expression in the Properties view — to bind a component property to a declaration, call an API service, compute a value, or handle an event.

The Expression Editor

Expressions are written in the Expression Editor, a dialog that opens when you click the expression icon next to any property in the Properties view.

The editor contains:

  • Code editor — a syntax-highlighted editor with autocomplete. As you type, available declarations and services from $ctrl are suggested automatically.
  • Declarations tab (right panel) — lists all declarations available in the current scope. Click any item to insert it into the expression at the cursor position.
  • Parameters tab (right panel, function properties only) — lists the parameters available for the event handler. For example, a Click handler exposes $event (the DOM event object). Click an item to insert it.

Click Save to apply the expression to the property, or Cancel to discard it.

What Expressions Can Contain

Expressions are evaluated as JavaScript, but they are limited to a single evaluable expression — a snippet that produces a return value. Statements such as if, for, while, variable declarations (var, let, const), and try/catch blocks are not supported. For logic that requires multiple steps or control flow, write a function in the Declarations panel and call it from the expression instead.

Within that constraint, expressions support the full range of JavaScript operators and syntax, including:

  • Property access — $ctrl.user.firstName
  • Method calls — $ctrl.myApiService.getUsers()
  • Arithmetic — $ctrl.price * $ctrl.quantity
  • Comparisons — $ctrl.count > 0
  • Logical operators — $ctrl.isAdmin && $ctrl.isActive
  • Ternary — $ctrl.isLoggedIn ? $ctrl.user.name : 'Guest'
  • String concatenation — $ctrl.user.firstName + ' ' + $ctrl.user.lastName
  • Object and array literals — { label: $ctrl.item.name, value: $ctrl.item.id }

Common Expression Patterns

Displaying a declaration value

The simplest binding — read a declaration and pass its value to a property:

1
$ctrl.selectedItem.name

Conditional visibility

Show or hide a component based on a condition:

1
$ctrl.items.length > 0

1
$ctrl.currentUser.role === 'admin'

Populating a component from an API service

Call an injected API service function directly. The return value is passed to the property:

1
$ctrl.inventoryService.getProducts()

Some component properties — such as a Table's Data — can handle expressions that return a Promise and will resolve it automatically. This is noted in the individual component's documentation when supported.

Calling a function

Call a declared function, optionally passing arguments:

1
$ctrl.formatCurrency($ctrl.order.total)

Event handlers

For function properties (event handlers such as Click or Change), the expression typically calls a declared function. The $event parameter, which holds the browser DOM event object, is available in the expression and listed in the Parameters tab:

1
$ctrl.handleSubmit($event)

1
$ctrl.onInputChange($event.target.value)

When to Use a Function Instead

If your binding logic requires more than a single expression — for example, multiple steps, conditional branching, or reuse across several properties — declare a function in the Declarations panel and call it from the expression. The function can contain full JavaScript logic and return the value the property expects:

1
2
// In the expression:
$ctrl.getStatusLabel($ctrl.order.status)

1
2
3
4
// In the function body (full JS):
if (status === 'pending') return 'Awaiting confirmation';
if (status === 'shipped') return 'On its way';
return 'Delivered';

Helpful Resources