Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Supported JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Validating Fields
Throwing and Handling Errors
Calling Component Methods
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Create CSP Trusted Sites to Access Third-Party APIs
Working with Salesforce Data
Using Apex
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

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

Detecting Data Changes with Change Handlers

Configure a component to automatically invoke a change handler, which is a client-side controller action, when a value in one of the component's attributes changes.

When the value changes, the valueChange.evt event is automatically fired. The event has type="VALUE".

In the component, define a handler with name="change".

The value attribute sets the component attribute that the change handler tracks.

The action attribute sets the client-side controller action to invoke when the attribute value changes.

A component can have multiple <aura:handler name="change"> tags to detect changes to different attributes.

In the controller, define the action for the handler.

The valueChange event gives you access to the previous value (oldValue) and the current value (value) in the handler action.

When a change occurs to a value that is represented by the change handler, the framework handles the firing of the event and rerendering of the component.