EP-12 | Pass Data from Parent to Child Component in LWC | LWC Stack ☁️⚡️

Kapil June 07, 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-12

Child Component HTML

<template>
    <lightning-card title="I am child Nested" icon-name="utility:user">
        <template if:true={mydata}>
            <div class="slds-var-m-around_medium">
                <b>Name : {mydata.Name}
                    <br />
                    Phone : {mydata.Phone}
                </b>
            </div>
        </template>
        <template if:false={mydata}>
            No Data found.

        </template>
    </lightning-card>


</template>

Child Component JS

1 2 3 4 5
import { LightningElement,api } from 'lwc'; export default class ChildComponentBasic extends LightningElement { @api mydata; }

Parent Component HTML

1 2 3 4 5 6 7 8
<template> <lightning-card title="I am Parent" icon-name="utility:user"> <div class="slds-var-m-around_medium"> <c-child-Component-Basic mydata={myData}> </c-child-Component-Basic> </div> </lightning-card> </template>
Parent Component JS

1 2 3 4 5 6
import { LightningElement } from 'lwc'; export default class ParentComponentBasic extends LightningElement { myData = {Name : 'Kapil Batra', Phone:'Salesforce Bolt'}; }

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 :)