1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to get Child Component value from Parent component in JS controller?

Discussion in 'Programming/Internet' started by DOMINIC EDWARD, Oct 8, 2018.

  1. Child Component - SearchBarCmp.cmp

    <aura:component >
    <input type="text" class="form-control" onchange="{!c.searchKeyChange}"
    placeholder="Search" id="SearchKeyValue"/>
    </aura:component>


    Child JS Controller - SearchBarCmpController.js

    ({
    searchKeyChange: function(component, event, helper) {
    var myEvent = $A.get("e.c:SearchKeyChange");
    myEvent.setParams({"searchKey": event.target.value});
    myEvent.fire();
    }
    })


    Event - SearchKeyChange.evt

    <aura:event type="APPLICATION">
    <aura:attribute name="searchKey" type="String"/>
    </aura:event>


    Parent Component

    <aura:component controller="SampleController">
    <aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
    <div class="slds-col slds-align-bottom" style="margin-top:10px">
    <c:SearchBarCmp aura:id="SearchCmp"/>
    </div>
    <button class="slds-button slds-button--icon-inverse slds-notify__close" onclick="{!c.GetWrapperValues}">
    </button>
    </aura:component>


    Parent JS Controller

    searchKeyChange : function(component, event, helper){
    var SearchKey = event.getParam("searchKey");
    //SearchKey provides the value of child component ie)SearchBarCmp.cmp input field value
    },
    GetWrapperValues :function(component, event, helper){
    //How to get the value from child component in this JS controller??
    }


    How to get the value from child component in this JS controller GetWrapperValues ??

    Suggestions Please

    Login To add answer/comment
     

Share This Page