2

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;
     }
}

1 Answer 1

4

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>
1
  • Yes i got it...Thanks For the Quick help:) Nov 3, 2019 at 7:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .