function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sai Teja 7557Sai Teja 7557 

How to Fetch values from Child Component on button click of Parent Component

Hey everyone,
I have two components. one is a child where we collect the data for different types of fields. one is Parent where we have some buttons. when we enter the data in the child component upon clicking the save button on the Parent component it should create records in salesforce and also it should hold the saved values. Please refer to the below picture for a better understanding. User-added imageThanks in advance,
Sai Teja
mukesh guptamukesh gupta
Hi SAi,

Follow below code:-

parentLWC.html:
  
<template>
    <div class="slds-box slds-theme_default"> 
        Enter value: <lightning-input 
                        type="text" 
                        value={strInput} onchange={inputChange}></lightning-input> <br>
       <lightning-button
       variant="brand"
       class="slds-button"
       data-id="Green_Button"
       label="Text Green"
        onclick={handleChange}></lightning-button>
        <c-child-cmp get-value-from-parent={strInput}></c-child-l-w-c>
    </div>
</template>


parentLWC.js:
  
mport { LightningElement , track} from 'lwc';

export default class ParentLWC extends LightningElement {

    @track inputValue;
    strInput;
inputChange (event ){
  this.inputValue = event.target.value; 
}
    handleChange( event ) {

        this.strInput = this.inputValue;

    }

}


parentLWC.js-meta.xml: 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>


childCmp.html: 
<template>
    Value entered in Parent Component is {getValueFromParent}
</template>


childCmp.js: 
import { api, LightningElement } from 'lwc';

export default class ChildLWC extends LightningElement {

    @api
    getValueFromParent;

}


childLWC.js-meta.xml: 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
mukesh guptamukesh gupta
Hi SAi,


This is updated
Follow below code:-

parentLWC.html: 
<template>
    <div class="slds-box slds-theme_default"> 
        Enter value: <lightning-input 
                        type="text" 
                        value={inputValue} onchange={inputChange}></lightning-input> <br>
       <lightning-button
       variant="brand"
       class="slds-button"
       data-id="Green_Button"
       label="Text Green"
        onclick={handleChange}></lightning-button>
        <c-child-cmp get-value-from-parent={strInput}></c-child-l-w-c>
    </div>
</template>

parentLWC.js: 
Import { LightningElement , track} from 'lwc';

export default class ParentLWC extends LightningElement {

    @track inputValue;
    strInput;
inputChange (event ){
  this.inputValue = event.target.value; 
}
    handleChange( event ) {

        this.strInput = this.inputValue;

    }

}


parentLWC.js-meta.xml:​​​​​​​ 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>


childCmp.html: 
<template>
    Value entered in Parent Component is {getValueFromParent}
</template>


childCmp.js:​​​​​​​ 
import { api, LightningElement } from 'lwc';

export default class ChildLWC extends LightningElement {

    @api
    getValueFromParent;

}

childLWC.js-meta.xml:​​​​​​​ 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh