Saturday 9 January 2021

Calling Child Component Method Using Parent :

Example shows how to call child component method from parent using template.querySelector.

findLegend -> Method in childComponent
Master Blaster Sachin Tendulkar -> Its parameters passing to findLegend Method
In this child component method, findLegend method exposed as api method property.

ParentComponent4.html

<template>
    <lightning-card title="Calling child comp from Parent method" icon-name="custom:custom14">
        <c-child-component4 ></c-child-component4>
    <lightning-button label="Find Cricket Legend Name"
                      onclick={fireEvent}
    >
    </lightning-button>
</lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class ParentComponent4 extends LightningElement {
    //Calling child method 
    fireEvent(){
        //Calling child method from parent
        this.template.querySelector("c-child-component4 ").findLegend('Master Blaster Sachin Tendulkar');

    }
}

xml:

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

childComponent4.html

<template>
  
    <p> Do you would like to know whos the legend of cricket? </p> <br/> 
    <b> Click on below button to get Legend Name</b>  <br/> 
     <p> Legend Name: <b> {cricketerName} </b></p>
</template>

import { LightningElement,api } from 'lwc';

export default class ChildComponent4 extends LightningElement {
    @api cricketer;
    cricketerName;
    //Decorate method with apI property
    //Publicly expose this method
    //Otherwise it becomes private method
    @api findLegend(Name){
       this.cricketerName =Name;
    }
}

xml

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

Configuration File Tags

apiVersion:- A double value that binds the component to a Salesforce API version. To check the current version, take help of this knowledge article.

description:-A short description of the component, usually a single sentence. Appears in list views, like the list of Lightning Components in Setup, and as a tooltip in the Lightning App Builder and in Community Builder.

When you hover your mouse to the custom component deployed to the org, you can see the description with the label.

isExposed:-A Boolean value. Exposes the component in all orgs, and in Lightning App Builder and Community Builder. To make a component usable in a managed package, set isExposed to true. To make a component usable in Lightning App Builder and Community Builder, set isExposed to true.

masterLabel:-The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder.

targetConfig:- It is subtag of targetConfigs and used for different page type configuration. For Example:-

targets:-The targets attribute value that you specify must match one or more of the page types that you listed under <targets> for the component. It Supports the property and objects subtags.

property:-Specifies a public property of a component that can be set in Lightning App Builder or Community Builder. The component author defines the property in the component’s JavaScript class using the @apidecorator.

objects:-A set of one or more objects the component is supported for. This tag set works only inside a parent targetConfig that’s configured for lightning__RecordPage. Specify the objects tag set only once inside a targetConfig set. Supports the object subtag.

Note

object:-Defines which objects the component is supported for. Use one object tag for each supported object. You can’t use ‘*’ to denote all objects.

Html

<template>
    <div class="slds-m-around_small">
        <strong>
            Metadata File Example {message} <br/>
            page no  : {pageno}
        </strong>
    </div>
</template>

Javascript

import { LightningElement,api } from 'lwc';

export default class MetaExample extends LightningElement {
    @api message;
    @api pageno;
}

xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
     <isExposed>true</isExposed>
    <masterLabel>Metadata File Configuraton</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Default</target>
        <target>lightningCommunity__Page</target>
        <target>lightning__Tab</target><!-- Winter 20 -->
        <target>lightning__Inbox</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage" >
            <property name="message" type="String" label="Welcome Message"/>
            <property name="pageno" type="Integer" label="Page No" />
            <objects>
                <object>Contact</object>
              </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Component Lifecycle

Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It also monitors components for property changes. Generally, components don’t need to call these lifecycle hooks, but it is possible.

Run Code When a Component Is Created

The constructor() method fires when a component instance is created. Don’t add attributes to the host element during construction. You can add attributes to the host element in any other lifecycle hook.

Run Code When a Component Is Inserted or Removed from the DOM

The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. The disconnectedCallback() lifecycle hook fires when a component is removed from the DOM.

Run Code When a Component Renders

The renderedCallback() is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase.

Handle Component Errors

The errorCallback() is unique to Lightning Web Components. Implement it to create an error boundary component that captures errors in all the descendent components in its tree. It captures errors that occur in the descendant's lifecycle hooks or during an event handler declared in an HTML template. You can code the error boundary component to log stack information and render an alternative view to tell users what happened and what to do next.

html

<template>
    <p>Test Hook example</p>
    <lightning-card title="Life cycle hooks"  icon-name="custom:custom14">
        {msg}
    </lightning-card>
</template>

Javascript

import { LightningElement } from 'lwc';

export default class HooksExample extends LightningElement {
    msg='annappa';
    //When component is created
    constructor(){
        super();
        console.log('inside constructor');
        this.msg = this.msg+''+'PH';

    }
  //Component is inserted from DOM
    connectedCallback(){
        console.log('connected callback');

    }
    //Component is disconnected from DOM
    disconnectedCallback(){
        console.log('disconnected callback');

    }
    //Run a component when Component renders
    renderedCallback(){
        console.log('rendered callback');
    }
    //Handle component error
    errorCallback(error,stack){
        console.error('error');

    }
}

xml

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

Getter property in Lightning web components

1. Use getter property if you want to modify the property before you use in template

2. Use getter property when you don't want to create a variable

html

<template>
    <lightning-card title="Getter Property"  icon-name="custom:custom14">
     <p> Passing variable without declaring variable : {passProperty}</p>
     <p> changemessage :  {changemessage}</p>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class GetProperty extends LightningElement {
    msg='Test';
    get passProperty(){
        return 'Without Declaring Variable';
    }
    get changemessage(){
        return this.msg+'-->'+'add value';
    }
}

xml

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