Apex Code Development You need to sign in to do that
Don't have an account?
anshuuman 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
<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
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