4

Is there a way, with out using an application event, to manipulate a child component?

Possibly by adding change listener to a bound expression? Example:

OuterComp.cmp

<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes">
    <aura:attribute name="myString" type="String" default="default"/>
    <aura:attribute name="count" type="Integer" default="0"/>
    <p>Outer String : {!v.myString}</p>
    <p><c:InnerComp myString="{!v.myString}" /></p>
    <ui:button label="Change Strings" press="{!c.changeStrings}"/>
</aura:component>

OuterCompController.js

({
    changeStrings : function(component, event, helper) {
        var count = component.get('v.count') + 1;
        component.set('v.count', count)
        component.set('v.myString', "changed : " + count);
    }
})

InnerComp.cmp

<aura:component >
    <aura:attribute name="myString" type="String" default="innerdefault"/>
    Inner String : {!v.myString}
</aura:component>

Using the code above if I set an outer component to change a string (myString) the inner component will update to reflect this. How can I make the inner component listen to this change and update its state?

Is this possible or are the developers expected to dynamically recreate the components each time?

7

When the attribute changes, there is an aura:valueChange event that is fired automatically. If you have a handler for it in you component, you can perform some action when that change happens:

<aura:handler name="change" value="{!v.myString}" action="{!c.handleValueChange}"/>
1
  • 1
    Does not seem to work well with collections :( – dzh Oct 31 '16 at 9:41

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.