aura:valueChange

Indicates that an attribute 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.
<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>

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

<aura:component>
    <aura:attribute name="myBool" type="Boolean" default="true"/>

    <!-- Handles the aura:valueChange event -->
    <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/>
    <ui:button label="change value" press="{!c.changeValue}"/>
</aura:component>

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

({
    changeValue : function (component, event, helper) {
      component.set("v.myBool", false);
    },

    handleValueChange : function (component, event, helper) {
        // handle value change
        console.log("old value: " + event.getParam("oldValue"));
        console.log("current value: " + event.getParam("value"));
    }
})

The valueChange event gives you access to the previous value (oldValue) and the current value (value) in the handler action. In this example, oldValue returns true and value returns false.

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 attribute for which you want to detect changes.
action Object The client-side controller action that handles the value change.