Parent to Child Communication on action at parent

In our previous article, we have seen how to pass data as a string or array/objects. Now will try to pass the updated data to the child component when some action triggers at the parent component.

Let's understand how the parent component passed updated data to the child component when an action occurred from the below fig.

fig: Parent to Child Communication on action at parent

Create two lwc progressBarParentComponent and progressBarChildComponent.
Add the code to the respective file from the code given below.
In the parent component, we have created a local property percentage and initialize it with value 10.
In progressBarParentComponent.html we have created a lightning-card to make our component decent.
Within the lightning-card we have created the input field of type number with minimum value 0 and maximum value 100
In the same input field, we have created an event attribute onkeyup that will call the changeHandler method as soon as you type something in the input field.
In changeHandler method, we are receiving the value you have typed in the input field and using a ternary operator assigning it to the percentage property.
In short, we are updating the percentage property with the number you type in the field. If the number goes above 100, it's value remaining 100.
We have composed the progressBarChildComponent in our parent by the following syntax c-progress-bar-child-component and passing the percentage property value to the child.
In the child component, we have created a public property percentage by appending the @api.
In the child component, we have created a getter getStyle as well that takes the latest value of the percentage and generate the widthproperty with percentage value.
Some CSS has been used to keep the look and feel better

on change demo Output

After placing the component on the page, you will see the following output.

fig: Parent to Child Communication on action at parent output

Parent component

progressBarParentComponent.js

import { LightningElement } from 'lwc';

export default class ProgressBarParentComponent extends LightningElement {
    percentage = 10
    changeHandler(event) {
        this[event.target.name] = event.target.value <= 100 ? event.target.value : 100;
    }
}

progressBarParentComponent.html

 <template>
    <div class="margin-bottom-2rem">
        <lightning-card title="Passing data to Child on action at parent" icon-name="custom:custom14">
            <div class="slds-m-around_medium">
                <div class="parent-wrapper">
                    <h2>Parent Component</h2>
                    <div class="field">
                        <label for="name">Enter your percentage:</label>
                        <input id="percentage" type="number" min="0" max="100" name="percentage" onkeyup={changeHandler}
                            value={percentage} />
                    </div>
                    <div class="child-wrapper">
                        <h2>Child Component</h2>
                        <c-progress-bar-child-component percentage={percentage}></c-progress-bar-child-component>
                    </div>
                </div>
            </div>
        </lightning-card>
    </div>
</template>

progressBarParentComponent.css

input {
    vertical-align: middle;
    margin: 5px;
    padding: 10px;
    background-color: #fff;
    border: 2px solid #ddd;
    font-size: 16px;
}
h2{
    font-weight: 700;
    font-size: 18px;
}
.child-wrapper{
    padding: 10px;
    border: 2px solid #3cc2b3;
    margin: 10px;
}
.parent-wrapper{
    border: 5px solid #00a1e0;
    padding: 5px;
}

progressBarParentComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Child component

progressBarChildComponent.js

import { LightningElement, api } from 'lwc';

export default class ProgressBarChildComponent extends LightningElement {
    @api percentage;
    get getStyle() {
        return 'width:' + this.percentage + '%';
    }
}

progressBarChildComponent.html

 <template>
    <div class="myProgress">
        <div class="myBar" style={getStyle}>{percentage}</div>
    </div>
</template>

progressBarChildComponent.css

.myProgress {
    width: 100%;
    background-color: #ddd;
}
  
.myBar {
  height: 50px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 50px;
  color: white;
}
.danger{
  background-color: #f00;
}

progressBarChildComponent.js-meta.xml

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

on change demo Output

After placing the component on the page, you will see the following output.

fig: Parent to Child Communication on action at parent output

Book Demo