+ Start a Discussion
anshuuman Aachianshuuman Aachi 

parent to child component communication in LWC error

The variable kamalValue coming undefined in child template

<template>

    <lightning-card title="ParentToChild" >

    <lightning-input value={kamalValue} type="text" label="kamalPublicMethodTest" ></lightning-input>

    <lightning-button label="click" variant="brand" onclick={callChildCMP}></lightning-button>

    <c-public-method-child></c-public-method-child>

</lightning-card>

</template>

 

 

import { LightningElement,track} from 'lwc';

 

export default class PublicMethodParent extends LightningElement {

 

    @track kamalValue;

 

    callChildCMP(){

     const childCMP= this.template.querySelector('c-public-method-child');

     

     

    childCMP.changeMessage(this.kamalValue);

   

}

}

 

 

 

<template>

    

 

    Message Will Come here from Parent Component :- {kamalValue}

</template>

 
 

 

import { LightningElement,track,api } from 'lwc';

 

export default class PublicMethodChild extends LightningElement {

 

    @track kamalValue;

      

    @api

     changeMessage(tmpVariable){

 

       

        this.kamalValue='Value changesample->'+tmpVariable;

        

    }

 

}

please reply to kamalakar.aachi@yahoo.com
karthikeyan perumalkarthikeyan perumal
Hello, 

Try below code.. you are almost done with have to do some chnages.  all you need to create onchange event for lightning input  and capture event details in to track and pass it to method. thats it. 

CHILD COMP HTML
template>

    <lightning-card title="ParentToChild" >

    <lightning-input value={kamalValue} type="text" label="kamalPublicMethodTest" onchange={selectedvalue} ></lightning-input>

    <lightning-button label="click" variant="brand" onclick={callChildCMP}></lightning-button>

    <c-parenlwc></c-parenlwc>

</lightning-card>

</template>

JS
 
/* eslint-disable no-alert */
import { LightningElement,track } from 'lwc';

export default class Childcomp extends LightningElement {
    @track kamalValue;
    selectedvalue(event){
        this.kamalValue=event.target.value;
        
    }
    callChildCMP(){
        
        const childCMP=this.template.querySelector('c-parenlwc').changeMessage(this.kamalValue);
         
    }
}

Parent Comp HTML
 
<template>

    Message Will Come here from Parent Component :- {kamalValue}

</template>

JS:
 
/* eslint-disable no-alert */
import { LightningElement,api } from 'lwc';

export default class ParenLWC extends LightningElement {
    @api kamalValue;
     
    
    @api

     changeMessage(tmpVariable){
        
        this.kamalValue='Value changesample->'+tmpVariable;
        return this.kamalValue;

    }

    
}


Hope this solve your LWC parent to child communication. 

Thanks
karthik