Hello friends, today we will call child method with/without parameters from parent component methods in LWC (Lightning Web Component) Salesforce. Many times we need to invoke the child method to show modal popup or any other business requirements. Let’s start…
Call child method from parent component in the video check this
ChildLwc.Html : Here we put two fields which value will come from the parent component
<template>
<lightning-card variant="Narrow" title="Child Component" icon-name="standard:account">
<div class="slds-p-horizontal_small">
<h1>Name : {Name}</h1>
<h1>City : {City}</h1>
</div>
</lightning-card>
</template>
ChildLwc.Js :
import { LightningElement, api } from 'lwc';
export default class ChildLwc extends LightningElement {
Name;
City;
@api callFromParent(paremt1, paremt2){
this.Name = paremt1;
this.City = paremt2;
}
}
ParentLwc.Html: Here we create two input fields and a button to call the child method.
<template>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Call Child Method From Parent LWC</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning-card variant="Narrow" title="Parent Component" icon-name="standard:account">
<div class="slds-p-horizontal_small">
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Name" onchange={handleName} value={Name}></lightning-input>
</div>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="City" onchange={handleCity} value={City}></lightning-input>
</div>
<!-- call child method -->
<div class="slds-p-around_medium lgc-bg" style="text-align: end;">
<lightning-button variant="brand" label="Call Child" title="Call Child" onclick={callChildMethod} class="slds-m-left_x-small"></lightning-button>
</div>
</div>
</lightning-card>
<br/>
<!-- Child Component --->
<c-child-lwc></c-child-lwc>
<!---------------------->
</template>
ParentLwc.Js :
import { LightningElement } from 'lwc';
export default class ParentLwc extends LightningElement {
Name;
City;
handleName(event){
this.Name = event.detail.value;
}
handleCity(event){
this.City = event.detail.value;
}
callChildMethod(event){
let child = this.template.querySelector('c-child-lwc');
child.callFromParent(this.Name, this.City);
}
}
parentLwc.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
What’s your Reaction?
+1
6
+1
+1
+1
1
+1
+1
2
Total views : 1113320