Hello friends, In this post, I will show you conditional rendering in lightning web component. By using this example you can show or hide any content dynamically in LWC. so let's get started,

Template if:true conditional rendering in lightning web component

In this example, content shows based on the selection of  checkbox. When a user selects or deselects the checkbox., based on that content is visible.

ConditionalRendering.html 

 <template>
	<lightning-card title="Template If:True Conditional Rendering" icon-name="custom:custom13">
		<div class="slds-m-around_medium">
			<lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
			<template if:true={isDetailsVisible}>
				<div class="slds-m-vertical_medium">
					Details visible when checkbox true..!
				</div>
			</template>
			<template if:false={isDetailsVisible}>
				<div class="slds-m-vertical_medium">
					Details visible when checkbox false..!
				</div>
			</template>
		</div>
	</lightning-card>
 </template>
ConditionalRendering.js
 import { LightningElement } from 'lwc';
 export default class ConditionalRendering extends LightningElement {
    isDetailsVisible = false;
    handleChange(event) {
        this.isDetailsVisible = event.target.checked;
    }
 }
ConditionalRendering.js-meta.xml
 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
	</targets>
 </LightningComponentBundle>

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.