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.

1	<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.

01

({

02	changeValue : function (component, event, helper) {

03	component.set("v.myBool", false);

04

},

05

06	handleValueChange : function (component, event, helper) {

07	// handle value change

08	console.log("old value: " + event.getParam("oldValue"));

09	console.log("current value: " + event.getParam("value"));

10

}

11

})

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.