| Requirement : | ‹ | › |
LWC Life Cycle :
Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle.
LWC lifecycle contains the following phases:
1. constructor()
2. connectedCallback()
3. disconnectedCallback()
4. render()
5.renderedCallback()
6. errorCallback(error,stack)
1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called.
First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute.
2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM.
3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM.
4. render(): render() is used to override the standard rendering functionality.
5. renderedCallback(): renderedCallback() is called after component is rendered.
6. errorCallback(error,stack): errorCallback(error,stack) is called when the component thrown an error.
cmpLifeCycle.html
<template>
<lightning-card title="LWC Life Cycle" icon-name="custom:custom2">
<c-cmp-child-life-cycle></c-cmp-child-life-cycle>
<div>Inside First Template</div>
<lightning-button
label="Go to Second Template"
onclick={changeTemplate}>
</lightning-button>
</lightning-card>
</template>
cmpLifeCycle.js
import { LightningElement,api } from 'lwc';
import firsttemplate from './cmpLifeCycle.html'
import secondtemplate from './cmpLifeCycle2.html'
export default class cmpLifeCycle extends LightningElement {
@api templateno = 'temp1';
constructor(){
super();
console.log('Inside constructor');
}
connectedCallback(){
console.log('Inside connectedCallback');
}
disconnectedCallback(){
console.log('Inside disconnectedCallback');
}
changeTemplate(){
console.log('Inside changeTemplate method');
if(this.templateno === 'temp1'){
this.templateno = 'temp2';
}
else{
this.templateno = 'temp1';
}
}
render(){
console.log('Inside render');
if(this.templateno === 'temp1'){
return firsttemplate;
}
else{
return secondtemplate;
}
}
renderedCallback(){
console.log('Inside renderedCallback');
}
errorCallback(error,stack){
console.log('Inside errorCallback' +error);
alert('error' +error);
}
}
cmpLifeCycle.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
cmpLifeCycle2.html
<template>
<div>Inside Second Template</div>
<lightning-button
label="Go to First Tempalte"
onclick={changeTemplate}>
</lightning-button>
</template>
cmpChildLifeCycle.html
<template>
</template>
cmpChildLifeCycle.js
import { LightningElement } from 'lwc';
export default class cmpChildLifeCycle extends LightningElement {
connectedCallback(){
throw new Error('Error Occured !!');
}
}
cmpChildLifeCycle.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Comments
Post a Comment