I'm working on an input component, and would like to notify the parent when the value changes

<!-- c:parent -->
<c:myInput onChange="{!c.handler}" />

But to do so, I need an event type to register in my input component...

<!-- c:myInput -->
<aura:registerEvent name="onChange" type="???"/>

Is there a standard event I can use to this effect or do I have no other choice than to create my own onChange event?


The default type of a "value change" notification is the aura:valueChange event. Unfortunately, you can't use it:

<!-- compiler error here -->
<!-- Cannot fire event of type: markup://aura:valueChange: Source -->
<aura:registerEvent name="onchange" type="aura:valueChange" />

So yes, if you want to be able to "fire your own event", you'd have to use a custom event, as we can't fire system events.

According to the documentation, you're supposed to be able to extend the default aura:valueChange event, or register use of it directly, since it is global, but unfortunately, neither are currently allowed by compiler (see above for registerEvent):

<!-- Failed to save valueChange.evt: Event markup://c:valueChange cannot extend markup://aura:valueChange: Source -->
<aura:event extends="aura:valueChange" ...

Ultimately, a custom event is the only viable method at this time.

| improve this answer | |

You can use the change handle to keep track of data changes.

<aura:handler name="change" value="{!v.numItems}" action="{!c.itemsChange}"/>

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 tags to detect changes to different attributes.

Detecting Data Changes with Change Handlers

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.