Directives are special HTML attributes. The LWC programming model has a few custom directives that let you manipulate the DOM using markup.
In LWC we have two special directives for conditional rendering.
1.if:true
2.if:false
To render HTML conditionally, add the if:true|if:false
directive to a nested <template>
tag that encloses the conditional content.
<template if:true={expression}>
Show me when expression is true
</template>
<template if:false={expression}>
Show me when the expression is false
</template>
Now I assume you guys are aware of how to create a component in vs code. For conditional rendering will build three demos
if:true
conditiontemplateTrueDemo
templateTrueDemo.js
, templateTrueDemo.html
and templateTrueDemo.js-meta.xml
import { LightningElement, track } from "lwc";
export default class TemplateTrueDemo extends LightningElement {
//if:true demo logic
@track showText = false;
showHandler() {
this.showText = true;
}
}
<template>
<!-- card for if:true demo -->
<lightning-card title="if:true demo" icon-name="custom:custom17">
<ul class="slds-m-around_medium">
<button class="slds-button slds-button_success" onclick={showHandler}>
Click me to show the text
</button>
<template if:true={showText}>
<h3>Hurray!! You able to see the hidden text</h3>
</template>
</ul>
</lightning-card>
</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="templateTrueDemo">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
if:true
directive shows the DOM(Document object model) only if the condition/expression is true
.showText
property will become true
showHandler
method to change the showText
property to true
showHandler
will gets triggered on click of a buttonAfter placing the component on the page, you will see the following output.
if:false
conditiontemplateFalseDemo
Add the following code to the templateFalseDemo.js
, templateFalseDemo.html
and templateFalseDemo.js-meta.xml
import { LightningElement, track } from "lwc";
export default class TemplateFalseDemo extends LightningElement {
//if:false demo logic
@track hideText = false;
hideHandler() {
this.hideText = true;
}
}
<template>
<lightning-card title="if:false demo" icon-name="custom:custom16">
<ul class="slds-m-around_medium">
<button
class="slds-button slds-button_destructive"
onclick={hideHandler}
>
Click me to hide the text
</button>
<template if:false={hideText}>
<h3>Thanks for seeing me!!</h3>
</template>
</ul>
</lightning-card>
</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="templateFalseDemo">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
if:false
directive is just opposite of the if:true
if:false
directive hides the DOM(Document object model) only if the condition/expression is true
.hideText
property will become true
hideHandler
method to change the hideText
property to true
hideHandler
will gets triggered on click of buttonAfter placing the component on the page, you will see the following output.
templateToggleDemo
templateToggleDemo
component gets created add templateToggleDemo.css
file to the folderAdd the following code to the templateToggleDemo.js
, templateToggleDemo.html
and templateToggleDemo.js-meta.xml
import { LightningElement, track } from "lwc";
export default class TemplateToggleDemo extends LightningElement {
@track toggleText = true;
toggleHandler() {
this.toggleText = !this.toggleText;
}
}
<lightning-card title="toggle demo" icon-name="custom:custom16">
<ul class="slds-m-around_medium">
<button class="slds-button slds-button_brand" onclick={toggleHandler}>
Click me to toggle the text
</button>
<template if:false={toggleText}>
<h3>let's play hide and seek!!</h3>
</template>
</ul>
</lightning-card>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="templateToggleDemo">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
hideText
property will become true
if:false
condition and binding the toggleText
which is initialized to true
. It means that load data will be visible.toggleHandler
method to the buttontoggleText
. Initially, it was true
on the first click it becomes false
on the second click again it becomer true
and so.After placing the component on the page, you will see the following output.
templateOnChangeDemo
Add the following code to the templateOnChangeDemo.js
, templateOnChangeDemo.html
and templateOnChangeDemo.js-meta.xml
import { LightningElement, track } from "lwc";
export default class TemplateOnChangeDemo extends LightningElement {
// condtional hide and show demo
@track inputText = null;
changeHandler(event) {
this.inputText = event.target.value;
}
get checkText() {
return this.inputText === "Hello";
}
}
<template>
<lightning-card
title="Condition based Hide/show. Type 'Hello' in textbox."
icon-name="custom:custom16"
>
<ul class="slds-m-around_medium">
<lightning-input
type="text"
name="title"
label="Enter your Name:"
onkeyup={changeHandler}
value={inputText}
></lightning-input>
<template if:true={checkText}>
<h3>Hello salesforce</h3>
</template>
</ul>
</lightning-card>
</template>
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="templateOnChangeDemo">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Hello
word in the textbox.After placing the component on the page, you will see the following output.