disconnectedCallback () in LWC with example

disconnectedCallback () in LWC with example

salesforcepoint → Thursday, 1 July 2021

 What is disconnectedCallback(): 

The disconnectedCallback() is one of the life cycle functions of modern web components. 

When disconnectedCallback() fired?

It gets invoked automatically when the corresponding web component gets removed from DOM. If we need to perform any logic when the component is removed from DOM, that logic can be added in disconnectedCallback(). This hook flows from Parent component to child. We use disconnectedCallback() to purging caches or removing event listeners that are created on connectedCallback().

Also Check: connectedCallback() LWC with example.

disconnectedCallback() in LWC Example

In this example, we have two components. Those are 'disconnectedCallbackParentLwc' and 'disconnectedCallbackChildLwc'. Here disconnectedCallbackChildLwc referred in parent component. In the parent component, we have a button 'Show/Hide' to show and hiding the child component. Initially, the child component displayed, once users click on the button 'disconnectedCallbackChildLwc' the child component removed from DOM. Since the component getting removed from DOM, disconnectedCallback function on the child component gets invoked and an alert will appear.

disConnectedCallbackChildLwc.js

import { LightningElement } from 'lwc';
export default class DisConnectedCallbackChildLwc extends LightningElement {
    disconnectedCallback() {
        console.log('child disconnected callback')
    }
}

disConnectedCallbackChildLwc.html

<template>
    <p>I am child LWC component</p>
</template> 

disConnectedCallbackParentLwc.js

import { LightningElement } from 'lwc';
export default class DisConnectedCallbackParentLwc extends LightningElement {
    show = true;
    handleShowHide() {
        this.show = !this.show;
    }
}

disConnectedCallbackParentLwc.html

<template>
    <lightning-card title="disconnectedCallback Example">
        <p>Parent LWC component</p>
        <lightning-button variant="brand" slot="actions" label="Show/Hide" onclick={handleShowHide}
            class="slds-m-left_x-small"></lightning-button>
        <template if:true={show}>
            <c-dis-connected-callback-child-lwc></c-dis-connected-callback-child-lwc>
        </template>
    </lightning-card>
</template>

Output

How To Display LWC Component In Quick Action

How To Display LWC Component In Quick Action

salesforcepoint → Saturday, 25 July 2020

Lighting Web Component (LWC)  In Quick action 

We can't show lwc component directly in lightning quick action, if we need to show Lightning web component in quick action then we need to create simple lightning aura component and in that we need to refer Lwc component (check example code below). Then we can show lwc component content in quick action button.

Showing LWC Component content in Lightning Quick Action 

Step 1: Create new lightning web component : lwcAction

lwcAction.html

 <template>  
   <div class="slds-box slds-theme_shade">  
     <P> I am from LWC Component</P>  
   </div>  
 </template>  

Step2: Create new lightning aura component LwcInAuraQuickAction

LwcInAuraQuickAction.cmp

 <aura:component implements="flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,  
               force:hasRecordId,force:lightningQuickAction" access="global" >  
   <c:lwcAction />  
 </aura:component>  

Add it to quick action button

Go to Object Manger--> Buttons, Links, and Actions --> New Action 

--> Select Lightning Component as Action Type

--> Select LwcInAuraQuickAction as Lightning Component

--> Give "LWC ACtion" as Label and save.

--> Add this "LWC Action" button to page layout.

Output:

Create Calculator Using Lightning Web Component(LWC)

Create Calculator Using Lightning Web Component(LWC)

salesforcepoint →

Simple LWC Calculator

In this we are going to see how to create or build simple lightning web component calculator  with functions like 

• How to add two numbers in Lwc.
• How to subtract two numbers in Lwc. 
• Division of two numbers in Lwc.
• Multiplication of two numbers in Lwc.

Steps to create Lightning Web Component Calculator

Step1 : Create New Lightning Web component with name: calculatorInLwc.

calculatorInLwc.html

 <template>  
    <div class="slds-box slds-theme_shade">  
     <lightning-input type="number" name="input2" label="Number 1" onchange={handleNumberOeChange} value={firstNumber}></lightning-input>  
     <lightning-input type="number" name="input2" label="Number 2" onchange={handleNumberTwoChange} value={secondNumber}></lightning-input>  
   </div>  
   <div class="slds-box slds-theme_shade">  
     <b>Output value is : </b>  
      <P>{resultValue}</p>  
   </div>  
    <div class="slds-box slds-theme_shade">  
     <lightning-button label="Addition" onclick={addition}> </lightning-button>  
     <lightning-button label="Multification" onclick={multification}> </lightning-button>  
     <lightning-button label="Subtraction" onclick={subtraction}> </lightning-button>  
     <lightning-button label="Divison" onclick={division}> </lightning-button>  
    </div>  
 </template>  

calculatorInLwc.js

import { LightningElement, track } from 'lwc';
export default class CalculatorInLwc extends LightningElement {
    @track firstNumber;
    @track secondNumber;
    resultValue;
    handleNumberOeChange(event) {
        this.firstNumber = parseInt(event.target.value);
    }
    handleNumberTwoChange(event) {
        this.secondNumber = parseInt(event.target.value);
    }
    addition() {
        this.resultValue = parseInt(this.firstNumber) + parseInt(this.secondNumber);
    }
    multification() {
        this.resultValue = this.firstNumber * this.secondNumber;
    }
    subtraction() {
        this.resultValue = this.firstNumber - this.secondNumber;
    }
    division() {
        this.resultValue = this.firstNumber / this.secondNumber;
    }
}

Step2: Add this lwc component to lightning page.

Add calculator Lightning web competent to lightning page in app builder.

Output: