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
Post a Comment