Conditional Rendering in LWC

 Hello All,

Today we are going to discus about conditional rendering in lighting web component ,If we want to hide some of the components from the HTML and show it based on conditions then we can use conditional rendering.
As we know that we have different concepts /syntax for conditional/logical operation .

• Aura Components <Aura:if>,

•  apex (if, else)      

  same way we have <template if:true> and <template if:false>in Lightning web component(LWC).

Sample Example LWC Code:

conditionalRenderingDemo.html

<!-- conditionalRenderingDemo.html-->

<template>

    <lightning-card conditionalRenderingDemoicon-name="custom:custom14">

        <div class="slds-m-around_medium">

            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>

            <template if:true={isDivVisible= }>

                <div class="slds-m-vertical_medium">

                    These are the details!

                </div>

            </template>

        </div>

    </lightning-card>

</template>

// conditionalRenderingDemo.js

import { LightningElement } from 'lwc';

 

export default class conditionalRenderingDemo extends LightningElement {

    isDivVisible= false;

 

    handleChange(event) {

        this.areDetailsVisible = event.target.checked;

    }

}