If else condition in Lightning web component


  basic.html
 ----------
 //starting tag of the html file.Template tag is mandatory in Lightning web component.
 <template>
    <lightning-input type="checkbox" label="check" onchange={clickMe}>
    </lightning-input>
//boolVal is the boolean variable.It will accept only two values(true,false).
//If block.If block will be executed when the boolean value is set to true.Since we are setting it to false
//so by default if block will  disappear on loading of a page.
    <template if:true={boolVal}>
      <lightning-input label="FirstName"  type="text" placeholder="Enter the FirstName"></lightning-input>
      <lightning-input label="LastName"  type="text" placeholder="Enter the LastName"></lightning-input>
      <lightning-input label="Email" type="Email" placeholder="Please enter the Email"></lightning-input>
      <lightning-input label="Phone" type="Phone" placeholder="Please Enter the Phone"></lightning-input>
    </template>
//We are setting it to false.By default below block will be executed
<template if:false={boolVal}>
Please click on checkbox to see the form data.
</template>
 </template>


basic.js
--------
import {LightningElement,track} from 'lwc';
 export default class Basic extends LightningElement
{
   //setting the default value to the variable.
   @ track boolVal=false;
   //
    clickMe(event)
    {
       
        this.boolVal=event.target.checked;

    }
 
   

}

Comments