Communication using Method in LWC

Just like Aura framework, we can call the method of Child Component from the Parent Component. In this communication, flow is from Parent Component to Child Component.

We can take one assignment that is when user will enter any phrase, it will be converted to all in capital letter.

Let’s see, how we can use the Method to complete this assignment.

Step 1: First, we have to create the Child Component called “changeCase” where upper case conversionĀ method needs to be built.

changeCase.html | to show the phrase in caps

<template>
    {updatedCase}
</template>

updatedCase attribute is defined by which user can get the result.

Step 2: Then, we have to write the JS file.

changeCase.js| contains conversion logic

import { LightningElement, api, track } from 'lwc';

export default class ChangeCase extends LightningElement {
    @track updatedCase;

    @api 
    changeUpperCase(phrase){
        this.updatedCase = phrase.toUpperCase();
    }
}

updatedCase property is defined as private reactive property so when the value is changed, the component is rendered.
changeUpperCase method is declared as public with @api decorator so another component can call this method. We have used standard javascript function toUpperCase() to convert the phrase as in Capital.

Step 3: Now, we will create the parent component named “changeCaseMethodCaller” which will call the method of the child component.

changeCaseMethodCaller.html | parent component to call child component “changeCase”

<template>
    <lightning-card title="Calling a Method">    
        <lightning-layout>
                <lightning-layout-item flexibility="auto" padding="around-small"> 
                    <lightning-input label="Input Phrase" onchange={handlePhraseChange}></lightning-input>
                 
                </lightning-layout-item>
                <lightning-layout-item flexibility="auto" padding="around-small"> 
                    <label class="slds-text-body_regular">Output Phrase</label>
                    <c-change-case></c-change-case>
                </lightning-layout-item>
            </lightning-layout>
    </lightning-card>     
</template>

We have called the child component using kebab case such as <c-change-case></c-change-case>.

Step 4: We need to write the JS file in this way.

changeCaseMethodCaller.js | to call the child component

import { LightningElement } from 'lwc';

export default class ChangeCaseMethodCaller extends LightningElement {

    handlePhraseChange(event){
        this.template.querySelector('c-change-case').changeUpperCase(event.target.value);
    }
    
}

Here, please notice that changeUpperCase method of the child component is invoked using this.template.querySelector.

Step 5: After this, we need to update the js-meta.xml file to visible the component in the app builder.

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

Step 6: At last, need to add the Parent Component into Lightning App Page/Record Page/ Home Page.

Result

 

 

 

 

 

Here, we have entered a phrase as “Hello My Friend”, LWC is showing the phrase in capital letter as “HELLO MY FRIEND“.

What is theĀ  difference between querySelector and querySelectorAll()?

querySelector() returns the first element that matches the selector in DOM, whereas querySelectAll() returns the array of DOM elements if we will pass the parameter as class or data-* value.

It is recommended that do not use the HTML id as querySelector() parameterĀ  due to the id has been changed to global id during HTML rendering.

 

22,869 total views, 9 views today

Rating: 4.0/5. From 4 votes.
Please wait...
This entry was posted in Lightning Web Component. Bookmark the permalink.

Leave a Reply