Pass Value From Parent To Child with @API Property In LWC | Salesforce

Pass Value From Parent To Child in LWC

Hey Kid !! Hope you're doing great 😊. In previous EPISODE we discussed about the component composition where we learnt how we can include multiple reusable components in a single component.

In this EPISODE, we will discuss about How we can pass the value from our parent component to the child component by using reactive property i.e. @API.

Now, let's clear some doubts before heading towards the actual concept Alright? 

If you have some basic idea about salesforce lightning Aura components where we pass value from parent to child thought an attribute and then again we need to define that attribute in our child component to access the passed value.

Also, when we want to pass the value from child to parent component we have used events in that case.

Similarly, in Lightning Web Components(LWC) we use a similar methodology to achieve the same but here we have a simpler version on it. In this episode, we will learn about the parent to child approach in a lightning web component.

So for passing the value from parent to child we are using the similar Aura approach of passing it through attribute but this time the game is different to use it in a child component.

HOW THE GAME IS DIFFERENT THAN AURA ? 

In Lightning Web Component (LWC), we are definitely passing passing it throught attribute like  :

------------------------------------------------

<template>

 <c-child name={nameFromParent}></c-child>

</template>

------------------------------------------------

As you can see we are passing {nameFromParent} value to a child in name attribute of the child.

But for accessing the value of name we don't have to define this attribute in child component.

Salesforce provided the reactive public property called as @API. Where you just need to use @API name in your child component's .JS file and boom!! you can directly use that value Coooool right ?

Let's understand what's the magic behind it 💡

HOW @API CAN DIRECTLY ACCESS PARENT VALUE ?

Because these reactive properties are nothing but the JavaScript Proxy where the value from the Parent component is cloned and used by the Child component. All the specifications of these JavaScript proxies are followed by ECMAScript standards.

WHY @API In LWC ?

@Api is public reactive property in lightning web component development. What exactly does that mean is 'Change in an attribute value decorated with @Api will reflect within the same component as well as outside the component where this value is referred'

NOTE: As this change in value will reflect outside the current component hence it's called as public reactive property. We have seen private reactive property in previous LWC Episode where we have used @track which is private (within same component) reactive property.

Now the picture is more clear right ? 

Today we'll create some awesome recipe to get a hands-on demonstration on it.

Something like this....

 

Excited ?? wait....wait....wait Kid!! we need to understand the design pattern of it first and then we will start this cool hands-on 😄.

Let's understand the Syntax and pattern of passing the value from parent to child.

SYNTAX/PATTERN : 

parentCmp.html

----------------------------------------------

<template>

  Hey!! this is my name from the parent component :

 <c-child name={myname}></c-child>

</template>

----------------------------------------------

In the above syntax of a parent component, we have composed child component <c-child> component where we used the kabab case in syntax (c- is default + component name) and we are passing the value of myname to the child component through an attribute name.

From where the myname value is coming ?

parentCmp.js

----------------------------------------------

import { LightningElement } from 'lwc';

export default class ParentCmp extends LightningElement {

   myname = 'SalesforceKid';

}

----------------------------------------------

from the above .js file, we are defining the value of myname as 'SalesforceKid' as default value.

Now let's check what's the secret is there in Child component ?

child.html

----------------------------------------------

<template>

 {name}

</template>

----------------------------------------------

In markup file, as you can see we are just displaying the value of name.

Then let's check the secret in .JS file of a child component. 

child.js

----------------------------------------------

import { LightningElement, api } from 'lwc';

export default class ParentCmp extends LightningElement {

   @api name;

}

----------------------------------------------

Ooooh !! So the secret is here Kid 😉. As you can see we have first added api in import to use it further. 

Secondly, we just used @api name in a child component's javascript file to access it.

And there you go....... 

Output :

----------------------------------------------

Hey!! this is my name from the parent component :

SalesforceKid

----------------------------------------------

As you can see in the Output, We have passed the value 'SalesforceKid' from a parent component first. Then we used @api in the child component's .JS file and Lastly we displayed the value on child component's .html markup file.

This is the pattern to be followed when we need to pass value from parent to child component.

Now, the question you might have 

WHAT IF I CHNAGE THE DEFAULT VALUE FROM PARENT COMPONENT ?

As @Api is Public Reactive property which means it's publically reactive. Hence, change in the value decorated with @Api from the source will immediately reflect on value.

To demonstrate this immediate reflection of value change now we will move ahead with our wonderful Hands-on demonstration.

As you can see in the above picture we are going to create the two-component where we will control the speed of windmill (Child Component) by changing the value from the input box (Parent Component) on immediate reaction basis.

Are you ready Kid ?

LOGIC BEHIND IT 💡?
So the logic I have used in this demonstration is like this, Whenever we are increasing the value from Input box (Parent) we will pass that value changed by the user to WindMill (Child). Then by using this value we will decrease the speed of WindMill.

So Let's get started.....

NOTE : In the below demonstration I am previewing my LWC in Local Development Server

To Install Local development (newly release) setup in vs code to preview your components locally.

To do this just open your terminal in VS code and run below two commands 

command 1 :

------------------------------------------------------------

sfdx plugins:install @salesforce/lwc-dev-server 

------------------------------------------------------------

command 2 :

------------------------------------------------------------

sfdx force:lightning:lwc:start

------------------------------------------------------------

and that's now you can display your preview localhost:3333 port in your browser.

STEP 1 :

Let's create Parent LWC Component in VS Code called as parentToChild.

Then follow the below code :

parentToChild.html
------------------------------------------------------------

<template>

<div title="ApiProperty"

style="background:#6e7db8;

width:50rem;

height:22rem;">

<div style="font-weight: bold;

font-size: 2rem;

color:#fec700;

text-align: center;">

PARENT TO CHILD

</div>

<div style="margin:5px; font-size: 1.1rem; color:white;">

Increase the value to slow down the fan

<span style="font-weight: bold; ">[Parent]</span>

</div>

<!-- Below is Input field on Parent Component -->

<lightning-input

label=" "

type="number"

min="0"

max="100"

value={percentage}

onchange={handlePercentageChange}

style="margin: 7px; width:100px;">

</lightning-input>
<!-- Below is the Child Component -->

<c-child-fan percentage={percentage}></c-child-fan>

</div>

</template>

------------------------------------------------------------

In the above Parent component .html markup the important thing to be noticed is the child component included 
<c-child-fan percentage={percentage}></c-child-fan> 

Where we are passing the percentage of the WindMill fan speed need to increase or decrease gotcha !!

I have also defined the lightning-input to handle the value change from the user and used the HTML browser events like onchange event I have used in the above code.

Let's take a look at how we are setting up this value in .JS file.

parentToChild.js
------------------------------------------------------------

import { LightningElement } from 'lwc';

export default class parentToChild extends LightningElement

{

percentage = 1;

handlePercentageChange(event){

const percentage = event.target.value;

this.percentage = percentage <= 100 ? percentage : 100;

}

}

------------------------------------------------------------

In the above .JS file you can observe that percentage default value is 1 and then by using handlePercentageChange method is handling the value change by the user in it as well as assigning it to percentage attribute.
Next line to that is to check whether the user is exceeding the value more than 100 to show him a warning 🚨.

That's it from parent component. Now let's take a look at the child component.

STEP 2 :

Create the new child lightning web component called as childFan in your VS Code.

And follow the below code :

childFan.html
------------------------------------------------------------

<template>

<div id="cont">

<div class="top">

<div class="dome"></div>
<!--In {style} we are using value passed from parent-->

<div class="fan" style={style}>

<div class="fan_blade1"></div>

<div class="fan_blade2"></div>

<div class="fan_blade3"></div>

<div class="fan_blade4"></div>

</div>

<div class="mill"></div>

</div>

<div class="floor"></div>

</div>

<div class="bottom">

<div class="dome"></div>
<!--In {style} we are using value passed from parent-->

<div class="fan" style={style}>

<div class="fan_blade1"></div>

<div class="fan_blade2"></div>

<div class="fan_blade3"></div>

<div class="fan_blade4"></div>

</div>

<div class="mill"></div>

</div>

<div class="floor"></div>

</div>

</div>

<span style="color: white;

position:absolute;

left: 71.5%;

top: 44%;

font-weight:bold;

font-size:1rem;">

[Child]

</span>

</template>

------------------------------------------------------------

In the above code, All the markup code is to define the structure of our WindMill. Like you can in the first picture before starting this hands-on we have dome of the WindMill, Floor of the WindMill, Fan of the WindMill and Mill itself as well.

The value passed by the parent will be used as {style} as an inline CSS based on which we are slowing down or increase the speed of the fan

NOTE: All the designing of these individual parts are defined by using CSS file which we will see after the .JS JavaScript file.

Let's take a look at how we are assigning the value passed from the percentage attribute and assigning it to style.

childFan.js
------------------------------------------------------------

import { LightningElement, api } from 'lwc';

export default class childFan extends LightningElement

{

@api percentage;

get style() {

return `animation-duration: ${this.percentage}s`;

}

}

------------------------------------------------------------

As discussed In the Syntax we have imported @api first in import and then we are accessing it below by using @api percentage.
In the next line by using the getter method (get style()) we are updating the animation-duration in the style with the percentage seconds.

Like for example user is entering 10 from parent component then the duration becomes 10s here in a child component. Higher the duration slower the moment of the Fan and vice versa.

We need to create the CSS file seperately in the same lightning component bundle of childFan component (Right-click and select create a new file and put the name as childFan.css).

And follow the little advance .css styling (I personally love designing 😉) as below :

childFan.css
------------------------------------------------------------

body{

background-color:white;

}

span{

display:inline-block;

}

.floor{

background-color:#1E2D49;

width:468px;

margin-left:178px;

position:absolute;

height:38px;

margin-top:169px;

z-index:0;

}

.mill{

background-color:#1E2D49;

width: 50px;

height: 140px;

transform: perspective(12px) rotateX(3deg);

position:absolute;

z-index:3;

margin-left:550px;

}

.mill::before{

content:"";

background-color:#FDC500;

width:20px;

height:20px;

position:absolute;

margin-left:15px;

margin-top:35px;

}

.mill::after{

content:"";

background-color:#FDC500;

width:20px;

height:25px;

position:absolute;

margin-left:15px;

margin-top:70px;

}

.dome{

background-color:#1E2D49;

width:35px;

height:35px;

position:absolute;

transform-origin: 0 100%;

transform: rotate(45deg);

overflow:hidden;

margin-left:551px;

margin-top:-23px;

z-index:4;

}

.fan{

background-color:#37475E;/*37475E */

width:10px;

height:10px;

border-radius:100%;

position:absolute;

margin-left:573px;

z-index:7;

animation-name:rotate_fan;

animation-iteration-count:infinite;

}

.fan_blade1, .fan_blade2, .fan_blade3, .fan_blade4{

background-color:#37475E;

width:4px;

height:60px;

position:absolute;

z-index:6;

margin-left:35px;

margin-top:-28px;

border-left:1.5px solid black;

border-top:1px solid black;

transform:rotate(90deg);

}

.fan_blade2{

transform:rotate(180deg);

margin-left:1px;

margin-top:5px;

}

.fan_blade3{

transform:rotate(360deg);

margin-left:3px;

margin-top:-60px;

}

.fan_blade4{

transform:rotate(270deg);

margin-top:-28px;

margin-left:-30px;

}

.fan_blade1::before, .fan_blade2::before,

.fan_blade3::before, .fan_blade4::before{

content:"";

background-color:transparent;

width:20px;

height:45px;

margin-left:5px;

background-size: 10px 11px;

background-image: linear-gradient(to left,

white 2px, transparent 1px),

linear-gradient(to bottom,

white 2px, transparent 1px),

linear-gradient(to top,white 1px,transparent 0px);

position:absolute;

}

@keyframes rotate_fan{

from{

}

to{

transform:rotate(360deg);

}

}

------------------------------------------------------------


In the above file, we have defined the styling for each part of WindMill as well as the animation part where the animation duration we are defining based on the value entered in the input box by the user and using it in {style} to update that.

STEP 3 :

Now its time to check the output of this hands-on component right ??

for that just right-click on your parentToChild lightning web component and as we are using the local development server you will SFDX: Preview Component Locally and it will automatically open it in your browser tab.

---------------------------------------------------

---------------------------------------------------

OUTPUT PREVIEW :
---------------------------------------------------
The output preview will look like this :

---------------------------------------------------

Wooooh !! worth spending time on it right Kid ? This is the best creative example of using the @API property and pass the value and accessing it. 
I hope you are enjoying this series 😊.

WOHOOO !! YOU HAVE JUST COMPLETED @API PROPERTY IN LIGHTNING WEB COMPONENT (LWC) EPISODE
If you like this SFDCkid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you all ⚡️Happy Learning ☁️⚡️ (Learn. Help. Share.) 😊 

<< PREVIOUS                                          NEXT >>