template if:true Conditional Rendering LWC

template if:true Conditional Rendering LWC

template if:true Conditional Rendering LWC(Lightning Web Component)

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content. template if:true|false directive is used to display conditional data.

templateIFTrueExampleLWC.html

<template>

    <lightning-card title="TemplateIFTrueConditionalRendering"

icon-name="custom:custom14">

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

            <lightning-input type="checkbox"

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

            <template if:true={areDetailsVisible}>

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

                    These are the details!

                </div>

            </template>

        </div>

    </lightning-card>

</template>




templateIFTrueExampleLWC.js

import { LightningElement } from 'lwc';

export default class TemplateIFTrueExampleLWC

extends LightningElement {

    areDetailsVisible = false;

    handleChange(event) {

        this.areDetailsVisible = event.target.checked;

    }

}




templateIFTrueExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>