Thursday, February 22, 2024

Communicate from Parent to Child Component in LWC

There are few scenarios where we need to pass property/values from parent component to child component in LWC. There are different ways to achieve this:

  • Using @api decorator (public property)

The @api decorator in the child component makes property as public, which can be utilised by parent component to update it. So whenever you add child component in parent component, then specify child public property as an attribute and pass the value from parent component property. 

For example, Child component contains public property "passedUrl" with @api decorator


    <div style="background-color:#b2b689;border-style: solid;">
        <b>Child component</b>
	<p>URL passed from parent-<b>{passedUrl}</b></p>


import { LightningElement,api} from 'lwc';
export default class SkChildComponent extends LightningElement {
    @api passedUrl;    

Now if you have to pass value to "passedUrl" property from parent component then just specify attribute as property name and pass any value from parent component property.


    <lightning-card  title="Communicate from Parent to Child">
        <div style="background-color:#E6E6FA;border-style: ">
            <b>This is parent Component</b>            
            <c-child-component passed-url={selResourceURL} >


import { LightningElement,track } from 'lwc';
export default class SkParentContainerCmp extends LightningElement {
	@track selResourceURL='';

  • Using getter setter property in child component
you can define @api property with separate getter setter defined. Whenever the value of this property changes from parent component, your setter method for that property will always get called. Now you can define your custom logic if you have and then utilise that in child component.


import { LightningElement,api,track } from 'lwc';
export default class SkChildComponent extends LightningElement {
    @track _userInputNumber;
    get userInputNumber(){
        return this._userInputNumber;
    set userInputNumber(value){
        //write your logic to set any property

  • By accessing child function from parent component
You can decorate the function defined in child component with @api. Now parent component can access this public function. By using this method, you can invoke function defined in child component.

Suppose you have defined below function in child component:

   //your logic

Now from parent component you can access this function by using below syntax:


I have created parent and child component to explain how this communication from parent to child component happen. Please find below complete code snippet and components snapshot:

Complete Code

Hope this will Help!!


  1. It was very Nice. This is a great blog I have read.
    Digital Marketing Agency.

  2. It was very Nice. This is a great blog I have here for more information

  3. It was very Nice. This is a great blog I have read Discover Samaaro, the ultimate free event management software. Sign up for a free trial and explore our event management tools and platforms. Create and manage events effortlessly with our free event sign-up website and comprehensive event management solutions. Please visit for more details :