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

aura:valueChange

Indicates that a value has changed.
This event is automatically fired when an attribute value changes. The aura:valueChange event is handled by a client-side controller. A component can have multiple <aura:handler name="change"> tags to detect changes to different attributes. 
1swfobject.registerObject("clippy.codeblock-0", "9");<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>

This example updates a Boolean value, which automatically fires the aura:valueChange event.

1<aura:component>
2    <aura:attribute name="myBool" type="Boolean" default="true"/>
3
4    <!-- Handles the aura:valueChange event -->
5    <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/>
6    <ui:button label="change value" press="{!c.changeValue}"/>
7</aura:component>

These client-side controller actions trigger the value change and handle it.

1({
2    changeValue : function (component, event, helper) {
3      component.set("v.myBool", false);
4    },
5
6    handleValueChange : function (component, event, helper) {
7        //handle value change 
8    }
9})
The change handler contains these required attributes.
Attribute Name Type Description
name String The name of the handler, which must be set to change.
value Object The value for which you want to detect changes.
action Object The client-side controller action that handles the value change.