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.
progressBarParentComponent
and progressBarChildComponent
.percentage
and initialize it with value 10
.progressBarParentComponent.html
we have created a lightning-card to make our component decent. onkeyup
that will call the changeHandler
method as soon as you type something in the input field.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.percentage
property with the number you type in the field. If the number goes above 100, it's value remaining 100.progressBarChildComponent
in our parent by the following syntax c-progress-bar-child-component
and passing the percentage property value to the child.percentage
by appending the @api
. getStyle
as well that takes the latest value of the percentage
and generate the width
property with percentage
value.After placing the component on the page, you will see the following output.
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;
}
}
<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>
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;
}
<?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>
import { LightningElement, api } from 'lwc';
export default class ProgressBarChildComponent extends LightningElement {
@api percentage;
get getStyle() {
return 'width:' + this.percentage + '%';
}
}
<template>
<div class="myProgress">
<div class="myBar" style={getStyle}>{percentage}</div>
</div>
</template>
.myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
height: 50px;
background-color: #4CAF50;
text-align: center;
line-height: 50px;
color: white;
}
.danger{
background-color: #f00;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
After placing the component on the page, you will see the following output.