Created
February 22, 2024 16:14
-
-
Save Sunil02kumar/5d637f7d5162b15dd580d5504356f39a to your computer and use it in GitHub Desktop.
Communicate from Parent to Child Component in LWC
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div style="background-color:#b2b689;border-style: solid;padding:2%;"> | |
<b>Child component</b> | |
<div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> | |
<p>Getting value from parent using public property @api decorator</p> | |
<p>URL passed from parent-<b>{passedUrl}</b></p> | |
</div> | |
<div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> | |
<p>Call a public function on the child</p> | |
<p>increase counter by 10 from parent-<b>{counter}</b></p> | |
</div> | |
<div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> | |
<p>Use a Public Getter and Setter</p> | |
<p>Square of Captured Input from parent-<b>{squareValue}</b></p> | |
</div> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LightningElement,api,track } from 'lwc'; | |
export default class SkChildComponent extends LightningElement { | |
@api passedUrl; | |
@track counter=0; | |
@track squareValue; | |
@api | |
increaseCounterbyTen(){ | |
console.log('****increaseCounterbyTen called'); | |
this.counter += 10; | |
} | |
@api | |
get userInputNumber(){ | |
return this.squareValue; | |
} | |
set userInputNumber(value){ | |
console.log('****userInputNumber setter get called-value:'+value); | |
if(value){ | |
this.squareValue=value*value; | |
}else{ | |
this.squareValue=undefined; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
<apiVersion>59.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__AppPage</target> | |
</targets> | |
</LightningComponentBundle> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<lightning-card title="Communicate from Parent to Child"> | |
<div style="background-color:#E6E6FA;border-style: solid;padding:2%;"> | |
<b>This is parent Component</b> | |
<br/> | |
<div style="padding:2px;"> | |
<lightning-button label="SFDCSTUFF BLOGS" onclick={sendMessageToChildCmp}></lightning-button> | |
<lightning-button label="TRAILHEAD" onclick={sendMessageToChildCmp}></lightning-button> | |
</div> | |
<div style="padding:2%;"> | |
<lightning-button label="Increase Counter by 10" onclick={increaseCounter}></lightning-button> | |
</div> | |
<div style="padding:2%;"> | |
<lightning-input type="number" label="Enter Number" value={userInput} onchange={onChangeHandler}></lightning-input> | |
<lightning-button label="Calculate Square in Child" onclick={sendUserInputToChild}></lightning-button> | |
</div> | |
<c-sk-child-component passed-url={selResourceURL} user-input-number={userInputToPassToChild} ></c-sk-child-component> | |
</div> | |
</lightning-card> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LightningElement,track } from 'lwc'; | |
export default class SkParentContainerCmp extends LightningElement { | |
@track selResourceURL; | |
@track userInput; | |
@track userInputToPassToChild; | |
sendMessageToChildCmp(event){ | |
const selBtnName = event.target.label; | |
console.log('****selBtnName:'+selBtnName); | |
if(selBtnName=='SFDCSTUFF BLOGS'){ | |
this.selResourceURL='https://www.sfdcstuff.com/'; | |
}if(selBtnName=='TRAILHEAD'){ | |
this.selResourceURL='https://trailhead.salesforce.com/'; | |
} | |
} | |
increaseCounter(){ | |
this.template.querySelector('c-sk-child-component').increaseCounterbyTen(); | |
} | |
onChangeHandler(event){ | |
const inputValue = event.target.value; | |
console.log('****onChangeHandler called**inputValue:'+inputValue); | |
this.userInput= inputValue; | |
} | |
sendUserInputToChild(){ | |
this.userInputToPassToChild= this.userInput; | |
console.log('****increaseCounter called**this.userInputToPassToChild:'+this.userInputToPassToChild); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
<apiVersion>59.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__AppPage</target> | |
</targets> | |
</LightningComponentBundle> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment