Implement Conditional Rendering If:true in LWC

Hello friends, today we will discuss Implement Conditional Rendering If:true in LWC Salesforce. We render (show/hide) the template by using Conditional Rendering If:true in LWC. Depending on whether the data is true or false, if:true|false={property} binds data to the template and removes or inserts DOM elements.

Using conditional rendering in the lightning web component (LWC) enables the display of components or elements depending on a specific condition.

Also check this : Comparing Old and New value of the record in Apex Trigger

Key Highlights :

1. Use for show / hide the element or component in the LWC component.
2. We use boolean values in ( if:true|false={property}) property.
3. If our condition is false element will remove from the LWC component.

Process & Code :

Here we will create an LWC component, and there is a button, on which if we click element will render (show/hide).

lWCRendering.HTML :

<template>
    <lightning-card title="Implement Conditional Rendering If:true in LWC" icon-name="standard:partner_marketing_budget">
        <lightning-button label="Render the Component" slot="actions" variant="brand" onclick={handleClick}></lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={isVisible}>
                <p>
                    Hello friends, today we will discuss Implement Conditional Rendering If:true in LWC Salesforce. We render (show/hide)  the template by using Conditional Rendering If:true in LWC. Depending on whether the data is true or false, if:true|false={property} binds data to the template and removes or inserts DOM elements. 
                </p>
            </template>
        </div>
    </lightning-card>
</template>

lWCRendering.JS:

import { LightningElement } from 'lwc';
export default class LWCRendering extends LightningElement {
    isVisible = false;

    handleClick(event) {
        this.isVisible = !this.isVisible;
    }
}

lWCRendering.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. LWC