Chapter 15: Parent to Child Communication using property in Lightning Web Component

Hello friends, in this chapter, we will learn about parent to child communication in lightning web component.

Topics Covered:

Types of component communication in lightning web component
What is decorator
Types of decorator
Public property
Simple Example
Example 2: Display List of Quotes

Component Communication In LWC

lightning web component can be nested and there are 4 possibilities for communication between components.

Parent to child communication
Child to parent communication
Communication between two separate components.
Lightning Web Component to aura component

In this chapter we will focus on parent to child Communication

What is decorator?

Decorator is a part of ECMA script and is used to add extra functionality in your function or methods.

These Decorators dynamically change the functionality of property or function.
They are identified with the symbol ‘@’ as prefixed before a method or a variable name.
Whenever we want to use any decorator, we must need to explicitly import it from ‘lwc’

import {LightningElement, decoratorName} from 'lwc';

In LWC we use 3 decorator to enhance the functionality of our property or function.

@track
@api
@wire

Here we are focusing on @api decorator

Passing data down: Parent to child communication

To pass data down in the component hierarchy, the child component must declare a public API. There are two forms in the public API of a component

public properties
public methods

This chapter will focus on public property

Public Property

If you want to make the property to be called from other component, you need to declare this property with @api decorator in the calling component. Along with decoration you have to import this in your js file as:

import { LightningElement, api } from 'lwc';

Along with this, if the value changes on this property, component will be re-rendered automatically.

Parent component can make use of the Public Property.
A component that declares a public property can set only its default value.
A parent component that uses the child component in its markup can set the child component’s public property value.

We can assign a default value to a public property, but, we should never change the value of a public property in the component itself. Remember the purpose of this property is to be the public API of the component, so, only the parent component should set or change its value.

Example 1

let’s say that we have 2 LWC components namely chilld and parent. So now we want to send data from child to parent and display the passed data.

Creating the public property in child.js

import { LightningElement, api } from 'lwc';
 
export default class Child extends LightningElement {

@api messageFromChild ='Smriti';
}

Displaying the public property in child.html

<template>
<div class="slds-text-heading_medium">  Value of message in child component: 
{messageFromChild}</div>
</template>

Passing the value to child from parent.html

<template>
 <c-child message-from-child={messageFromParent}></c-child>
</template>

parent.js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    messageFromParent = 'sfdcAmplified';
}

Output

Example : Display List of Quotes

Component Design

We have two components:-

parentAllQuotes(parent web component)
childQuotes(child web component)

Code for childQuote component

childQuote.html

<template>
    <div class="slds-p-around_medium lgc-bg">
        <lightning-tile>
                {quoteInfo.quote}
        </lightning-tile>
    </div>    
</template>

childQuote.js

import { LightningElement,api } from 'lwc';

export default class ChildQuote extends LightningElement {
    @api quoteInfo;
}

childQuote.css

.lgc-bg {
    background-color: #78f3ff;
}

Code for parentAllQuotes component

parentAllQuotes.html

<template>
    <lightning-card title="Quotes of the day">
        <ul>
            <template for:each={quoteInfo} for:item="quote">
                <li key={quote.Id} style="padding: 10px">
                    <c-child-quote quote-info={quote}></c-child-quote>
                </li>
            </template>
        </ul>
    </lightning-card> 
</template>

parentAllQuotes.js

import { LightningElement } from 'lwc';

export default class ParentAllQuotes extends LightningElement {

    quoteInfo = [
        {Id:'1', quote:'Best way to create future is to create it'},
        {Id:'2', quote:'Be not afraid of growing slowly,be afraid of only standing still'},
        {Id:'3', quote:'We dont grow when things are easy, we grow when we face challenges'},
        {Id:'4', quote:'Everything easy was once difficult'},
        {Id:'5', quote:'Believe you can and you are half way there'},
        {Id:'6', quote:'We dont have a great day, we make a "Great Day"'}
        ];

}

Output