LWC not evaluating the if:true statement

Question

I am trying to show the div tag statement on the basis of the condition of the statement is checked or not : it is not getting displayed on the component

HTML Markup

<template>
    <lightning-input type="checkbox" label="Show Div Tag" onchange={displayDivtagHandler}>
       <template if:true={displayDiv}>
           <div> I Am Super Fast Developer(true)</div>
       </template>
       <template if:false={displayDiv}>
        <div> I Am Super Fast Athlete(False)</div>
    </template>

    </lightning-input>

</template>

JS File :

import { LightningElement, track} from 'lwc';

export default class conditionalRenderingExample extends LightningElement {
     @track displayDiv = false;

     displayDivtagHandler(event){
        this.displayDiv = event.target.checked;
     }
}

Answer 1

There is no slot for lightning-input so you should not really put anything in the body. Below should work:

    <lightning-input type="checkbox" label="Show Div Tag" onchange={displayDivtagHandler}>
    </lightning-input>
    <template if:true={displayDiv}>
        <div> I Am Super Fast Developer(true)</div>
    </template>
    <template if:false={displayDiv}>
        <div> I Am Super Fast Athlete(False)</div>
    </template>