Saturday, May 18, 2019

Calling child method form parent (Parent Child Communication).

1. childComponent.html

<template>
    {childComMessage}
</template>

2. childComponent.js
import { LightningElement, api } from 'lwc';

export default class TestMyLwcComp extends LightningElement {
    @api childComMessage;

    @api
    messageFromChild(){
        this.childComMessage = "Message set from child method...........";
    }
}

3. parentComponent.html

<template>
    <lightning-card title="Parent Component">
        <lightning-layout>
            <lightning-layout-item>
                <c-child-component></c-child-component>
                <button onclick={displayChildMessage}>Display Child Message</button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

4. parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComp extends LightningElement {

    displayChildMessage(){
        this.template.querySelector('c-child-component').messageFromChild();
    }
}

5. 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>

6. 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.

7. 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,

Initial load















After click on <Display Child Message> button.

LWC to LWC Communication using Lightning Messaging Service (Part - 2)

In my previous post ( previous post link ) we have learn how to create a Lightning Messaging Service with 6 steps and today we will use the ...