Lightning Aura Components Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Dynamic Output in Expressions
Conditional Expressions
Data Binding Between Components
Value Providers
Expression Evaluation
Expression Operators Reference
Expression Functions Reference
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Expression Evaluation

Expressions are evaluated much the same way that expressions in JavaScript or other programming languages are evaluated.

Operators are a subset of those available in JavaScript, and evaluation order and precedence are generally the same as JavaScript. Parentheses enable you to ensure a specific evaluation order. What you may find surprising about expressions is how often they are evaluated. The framework notices when things change, and triggers re-rendering of any components that are affected. Dependencies are handled automatically. When a component is re-rendered, any expressions it uses will be re-evaluated.

Action Methods

Expressions are also used to provide action methods for user interface events: onclick, onhover, and any other component attributes beginning with "on".

Action methods must be assigned to attributes using an expression, for example {!c.theAction}. This expression assigns a reference to the controller function that handles the action.

Assigning action methods via expressions allows you to assign them conditionally, based on the state of the application or user interface. For more information, see Conditional Expressions.

<aura:component>
    <aura:attribute name="liked" type="Boolean" default="true"/>
    <lightning:button aura:id="likeBtn"
     label="{!(v.liked) ? 'Like It' : 'Unlike It'}"
     onclick="{!(v.liked) ? c.likeIt  : c.unlikeIt}"
    />
</aura:component>

This button will show "Like It" for items that have not yet been liked, and clicking it will call the likeIt action method. Then the component will re-render, and the opposite user interface display and method assignment will be in place. Clicking a second time will unlike the item, and so on.

The example demonstrates how attributes can help you control the state of a button. To create a button that toggles between states, we recommend using the lightning:buttonStateful component.

Note

Action Methods with Lightning Web Components

If you try to use an action method with a Lightning web component, it doesn’t behave as expected because Lightning web components don’t support expressions the same way that Aura components do. To write an action method, assign a controller action and execute logic depending on a value.

<aura:component>
    <aura:attribute name="liked" type="Boolean" default="true"/>
    <c:lwcButton aura:id="likeBtn"
     label="{!(v.liked) ? 'Like It' : 'Unlike It'}"
     onclick="{!c.handleLikeButtonClick}"
    />
</aura:component>
({
    handleLikeButtonClick: function (cmp) {
        if (cmp.get('v.liked')) {
             // like it logic
        } else {
             // unlike it logic
        }
    }
})