Salesforce LWC Multiple HTML Templates and Lifecycle Hooks

At times, we need to display different user interfaces based on certain conditions. To accomplish this, we tend to include all the necessary code within a single .html file of our component using <template if: true=true>.

However, this approach can make our .html file quite complicated. But, there's no need to worry as we are going to learn today how to create a second .html file and render different .html files conditionally.

Create a new LWC component in VS Code, and name it "multipleTemplateComponent". This will generate an HTML file, a JS file, and a metafile. Next, create a new file with the .html extension and name it "multipleTemplateComponentSecond". The structure of the component should look like the image provided below.

Please replace the code in each file.

multipleTemplateComponent.html

<template>
    <lightning-card>
        <div class="slds-p-around_medium slds-text-align_center">
           
            <div class="slds-p-around_xx-large slds-text-heading_large" style="color: #0176D3;font-weight:bold">
                Multiple HTML Templates In LWC
            </div>

            <div class="slds-p-around_small slds-text-title_bold">
                First Template
            </div>
            <div class="slds-p-around_small slds-text-title_bold">
                This is First Template, click button to see Second template.
            </div>
            <div class="slds-p-around_small">
                <lightning-button
                        onclick={handleChangeTemplate} 
                        variant="brand"
                        label="Go To Second Template">
                </lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

multipleTemplateComponentSecond.html

<template>
    <lightning-card>
        <div class="slds-p-around_medium slds-text-align_center">
           
            <div class="slds-p-around_xx-large slds-text-heading_large" style="color: #0176D3;font-weight:bold">
                Multiple HTML Templates In LWC
            </div>

            <div class="slds-p-around_small slds-text-title_bold">
                Second Template
            </div>
            <div class="slds-p-around_small slds-text-title_bold">
                This is Second Template, click button to see First template.
            </div>
            <div class="slds-p-around_small">
                <lightning-button   
                        onclick={handleChangeTemplate} 
                        variant="brand"
                        label="Go To First Template">
                </lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

multipleTemplateComponent.js

import { LightningElement, track } from 'lwc';
import firstTemplate from "./multipleTemplateComponent.html";
import secondTemplate from "./multipleTemplateComponentSecond.html";
export default class MultipleTemplateComponent extends LightningElement {
   
    @track tempalteName='firstTemplate';

    
    constructor(){
        super(); // we must call super before calling anything  in the constructor
        console.log('in constructor');
    }

    //connected call back
    connectedCallback(){
        console.log('in connected callback');
    }

    //method  for switching between templates
    handleChangeTemplate(){
        if(this.tempalteName === 'firstTemplate'){
            this.tempalteName ='secondTemplate';
        }
        else{
            this.tempalteName ='firstTemplate';
        }
    }

    
    render(){
        console.log('in render');
        return (this.tempalteName === 'firstTemplate') ? firstTemplate : secondTemplate;
    }

    renderedCallback(){
        console.log('in render callback');
    }

    disconnectedCallback(){
        console.log('in disconnected callback');
    }
}

Add these targets in the metafile, you can add whatever target you want.

     <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>

Here you can see we are rendering two HTML conditionally on a button click. All these are happening with the help of the render method.

I have added all methods of LWC Lifecycle HOOKs to give it a better understanding of the sequence of Lifecycle method calling.

1. Constructor: This function will be the initial one to be activated, and it is triggered when an instance of a component is instantiated.
2. ConnectedCallback: This event occurs when a component is added to the DOM.
3. Render: We are using this method to switch the HTML file of our component.
4. RenderedCallback: Fires when a component is rendered on the DOM.Called after every render of the component.
5. DisconnectedCallback: This event occurs when a component is removed from the DOM.
6. ErrorCallback: Fires in case of any error during a lifecycle hook or event.

When you will load the above page you will see a console message in sequence, first, you will get a console message from the constructor, then from connectedCallback, then from render, and then from the renderCallback. See image.

Upon toggling to a different tab and returning to this LWC tab, you’ll notice that the disconnectedCallback console message appears first, followed by the original sequence. This phenomenon occurs because when you transition from this component to others, it becomes detached from the DOM. Upon your return, the entire lifecycle of the component initiates once more. See image.

This is the final result you will get from the above component.

I have provided you with a simple explanation of Multiple HTML Templates and Lifecycle Hooks of LWC.

I hope you found it helpful and informative. Thank you for taking the time to read it. Please let me know your thought in the comment section.
#sfdc #crm #crmplateform #crmsoftware #srmsolution #salesforce #salesforce software #salesforce platform #salesforce marketing
#salesforce developers