EP 16 | Parent to Child communication using API Property and Functions in LWC | LWC Stack ☁️⚡️

Kapil June 11, 2021

 

 LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-16

Parent API HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
    <lightning-card title="I am Parent with API property " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
               <lightning-input type="number" value={percentage} onchange={handleonchange}></lightning-input>
               <br/>
               <c-childofp2cusingapi percentage={percentage}></c-childofp2cusingapi>
            </div>
        </div>
    </lightning-card>
</template>

Parent API JS
1
2
3
4
5
6
7
8
import { LightningElement } from 'lwc';

export default class Parentofp2cusingapi extends LightningElement {
    percentage=20;
    handleonchange(event){
        this.percentage = event.target.value;
    }
}
Child API HTML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
    <lightning-card title="I am child with API property " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <p>{percentage}%</p><br />
              
                <div style={style}>
                    .<br/>
                </div>
            </div>
        </div>
    </lightning-card>
</template>
Child API JS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { LightningElement, api } from 'lwc';

export default class Childofp2cusingapi extends LightningElement {

    @api percentage;
    
    get style(){
        return `background-color:red; min-height:50px; width: ${this.percentage}%; min-width:10px; border:1px solid black`;
    }
}
Parent Function HTML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
    <lightning-card title="I am Parent with API function " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
               <lightning-button label="Refresh" onclick={handleClick}></lightning-button>
               <br/>
               <c-childofp2cusingfunction></c-childofp2cusingfunction>
            </div>
        </div>
    </lightning-card>
</template>
Parent Function JS 
1
2
3
4
5
6
7
import { LightningElement } from 'lwc';

export default class Parentofp2cusingfunction extends LightningElement {
    handleClick(){
        this.template.querySelector('c-childofp2cusingfunction').refresh();
    }
}
Child Function HTML
1
2
3
4
5
6
7
8
9
<template>
    <lightning-card title="I am child with API function " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <p>{timestamp}</p><br />
            </div>
        </div>
    </lightning-card>
</template>

Child Function JS 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { LightningElement, api } from 'lwc';

export default class Childofp2cusingfunction extends LightningElement {

    timestamp = new Date();

    @api
    refresh(){
        this.timestamp = new Date();
    }
}

Output


Checkout complete tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

0 Comments