Events- Parent to child Navigation

Sometimes it is needed to merge the two or more components and after merging we also need a data flow between the components.

To pass data from top-bottom (Parent to child) in the component list, the child or lower component must declare a public API, with this public API parent can pass the data to child

Public properties

Public properties are properties denoted by the @api decorator. It is also known as Public reactive property.
Note: It is crucial that You can assign a default value to public property, but you should never change the value of public property in the component.

Let’s make it practically

Create the child component first that we are going to merge in the parent component.

ChildLWC.html

<template>
   <div>
       <a onclick={clickbutton}>Hello Salesforce driller child.Click here to get data from parent component</a>
       <br/>
       Data received from parent component after clicking above: {getDataFromParent}
   </div>
</template>

ChildLWC.js

import { LightningElement, api, track } from 'lwc';

export default class ChildLWC extends LightningElement {
   @track getDataFromParent;
   @api datesend;
   clickbutton(){
       this.getDataFromParent=this.datesend;
   }
  
}

Till now we have created the child component which we are going to integrate into the parent component. For that, we also need one more component, let’s create a parent component.

ParentLWC.html

<template>
   <c-child-l-w-c datesend="Got parent value through salesforce driller"></c-child-l-w-c>
</template>

No need to do anything on JS file because we are doing public property.

Output

Explanation

As we can in the parent object we have introduce the child component
<c-child-l-w-c datesend=”Got parent value through salesforce driller”> </c-child-l-w-c>
In the above statement we have the property datasend we need to declare this attribute in the child component as a public property as shown below.
@api datesend;

public methods

Public method denoted by the @api decorator. it’s a part of the general public API of the LWC element and it will be called from a top(parent) element, They expose as callable functions hooked up to the element.

Let’s explore it through examples,

Create the child component

ChildWC.html

<template>
   <div>
       <br/>
       Data received from parent component after clicking above: {getDataFromParent}
   </div>
</template>

ChildWC.js

import { LightningElement, api, track } from 'lwc';
export default class ChildComponent extends LightningElement {
   @track getDataFromParent;

   @api
   callchildmethod(param1) {
       // This will be called from the parent component
       this.getDataFromParent=param1;
   }
}

Not it’s time to create the parent component who will send the data from parent to child

parentLWC.html

<template>
   <div>
       <a onclick={clickbutton}>Hello Salesforce driller child.Click here to pass data from parent component</a>
       <c-child-l-w-c></c-child-l-w-c>
   </div>
</template>

parentLWC.js

import { LightningElement } from 'lwc';

export default class ParentLWC extends LightningElement {
   clickbutton(event){
       this.template.querySelector('c-child-l-w-c').callchildmethod('My Salesforce Driller');      
   }
}

Output

Click on the parent LWC link and see the result

Salesforce Menu

Salesforce Lightning

Salesforce LWC