Pass properties value from parent to child component (Parent Child Communication)

Objective of this post is to shown you how to call a child component from a parent component and also how to pass child component's property's value from parent component.

If you have existing project then you can use that or create a new project as describe in my previous post.

1. Create a child component named as "childComponent" and parent component named as "parentComponent".

2. Open "childComponent.js" file and add a string property (childComMessage) as follows,

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api childComMessage;
}

3. Open "childComponent.html" file and modify it with below code to display childComMessage.

<template>
    {childComMessage}
</template>

4. Now we want to call this childComponent from parentComponent. So, open parentComponent.html and modify it with below code,

<template>
    <lightning-card title="Parent Component">
        <lightning-layout>
            <lightning-layout-item>
                <c-childComponent></c-childComponent>    
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

5. Now we want to pass value of "childComMessage" property of childComponent. So, modify the code base of parentComponent.html again as below,

<template>
    <lightning-card title="Parent Component">
        <lightning-layout>
            <lightning-layout-item>
                <c-child-component child-com-message="Child component property's value passing from parent component."></c-child-component>    
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

Note: 
In child component (childComponent) and it's property name is "childComMessage" and is in "CAMEL" case, but while calling it from another component, child component and it's property should be written in "KEBAB" Case.
So, childComponent (camel case) should be like child-component (kebab case).
and childComMessage (camel case) should be like child-com-message (kebab case).

6. Now to make this parentComponent available in AppBuilder/Record Page/Home Page, please update "parentComponent.js-meta.xml" file as below,

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

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

7. Now deploy it to your authenticated ORG. If you are not authenticated any ORG till now then click  [Ctrl + Shift + P] and in command pallet type "Authorize an Org" and select "Authorize an Org" and from browser authenticate your destination ORG where you want to deploy parent and child component.

8. Then open any existing appBuilder / create a new one and drag the <parentComponent> in to respective column and then save and activate it. Now click the tab to show it in browser and it will look as follows,