Using child component methods in parent component in Lightning Web Components(lwc)

This post explains how to use the child component methods in parent component in lightning web components(lwc)

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

Ex:
ChildInLWC.html

<template>
    {upperCase}
</template>

ChildInLWC.js

import { LightningElement, api } from 'lwc';

export default class ChildInLWC extends LightningElement {
    upperCase;

    @api
    handleChangeNameToUpperCase(name) {
        this.upperCase = name.toUpperCase();
    }
}

handleChangeNameToUpperCase method is declared as public with @api decorator so another component can call this method.

ParentInLWC.html

<template>
    <lightning-card title="Call child methods in Lightning Web Components">
        <lightning-input label="Enter Name" value={nameToChange} onchange={handleOnchange} ></lightning-input>
       <c-child-in-l-w-c></c-child-in-l-w-c>
 </lightning-card>
</template>

called the child component in parent component <c-child-in-l-w-c></c-child-in-l-w-c>

ParentInLWC.js

import { LightningElement } from 'lwc';

export default class ParentInLWC extends LightningElement {
    
    nameToChange;
    
    handleOnchange(event) {
        window.console.log('value ===> '+event.target.value);
        this.template.querySelector('c-child-in-l-w-c').handleChangeNameToUpperCase(event.target.value);
    }
}

ParentInLWC.js.meta-xml

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

Output

How to refer child components names in parent component in lightning web component(lwc)

When you are referring the child component name in parent component name in lightning web component some times you may face the error
LWC1010: Failed to resolve entry for the module

To resolve the error,  replace capital letters become lowercased and prefixed with a hyphen (-).

Examples:
Assume below names are the child component names

childNameInLWC
sampleDEMO
sampleDataTable
sampleDATAinLWC

refer above components like this in the parent component

<c-child-name-in-l-w-c></c-child-name-in-l-w-c>
<c-sample-d-e-m-o></c-sample-d-e-m-o>
<c-sample-data-table></c-sample-data-table>
<c-sample-d-a-t-a-in-l-w-c></c-sample-d-a-t-a-in-l-w-c>

Best practice tip
avoid more capital letters in your component name.


Resource
LWC Component folder

How to get All parent objects and child objects related to the current object

Assume Opportunity is the current object, you want to know all parent object and child objects info of the current object.

All Parent Objects

Sample Code

for(Schema.SobjectField iterator: Opportunity.SobjectType.getDescribe().fields.getMap().Values()) {
    if(iterator.getDescribe().getType() == Schema.DisplayType.REFERENCE) {
        system.debug('Parent Objects ====> '+iterator.getDescribe().getReferenceTo());
    } 
}

Output

All Child Objects

Sample Code

Schema.DescribeSObjectResult sObjectInfo = Opportunity.SObjectType.getDescribe();
for (Schema.ChildRelationship iterator: sObjectInfo.getChildRelationships()) {
  system.debug('Child Objects ====> '+iterator.getChildSObject());
}

Output

Resource
DescribeSObjectResult Class