5

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?

1 Answer 1

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, 2016 at 9:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .