Lifecycle Hooks in Mounting Phase in LWC – Parent/Child

February 14, 2021 nisarkhan ASP.NET, 0

Life Cycle Parent Component:

<template>
    <lightning-card title="Lifecycle hook parent card">
        <div class="slds-var-m-around_medium">
                 <input type="text" onkeyup={changeHandler}/>
                 {name}
                <c-life-cycle-child></c-life-cycle-child>
            
        </div>
    </lightning-card>

</template>

import { LightningElement } from 'lwc';

export default class LifeCycleParent extends LightningElement {
    isChildVisible = false
    constructor(){ 
        super()
        console.log("parent constructor called")
    }
    connectedCallback(){ 
        console.log("parent connectedCallback called")
    }
    renderedCallback(){ 
        console.log("parent renderedCallback called")
    }

    name
    changeHandler(event){
        this.name = event.target.value
    } 
   
}

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

Life Cycle Child Component:

<template>
    <lightning-card title="Lifecycle hook Child card">
        <div class="slds-var-m-around_medium">
            
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class LifeCycleChild extends LightningElement {
    constructor(){ 
        super()
        console.log("Child constructor called")
    }
    connectedCallback(){ 
        console.log("Child connectedCallback called")
        throw new Error('Loading of child component failed')
    }
    renderedCallback(){ 
        console.log("Child renderedCallback called")
    }

}

Dynamic CSS in LWC