Hey guys, today in this post we are going to learn about How do you use template if:true and template if:false condition to display content in lightning web component – LWC.
Files we used in this post example
| lwcIfElseCondition.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface. |
| lwcIfElseCondition.js | Lightning Web Component JavaScript | It is holding onclick functionality for display the content as conditionally. |
| lwcIfElseCondition.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed. |
| lwcApp.app | Lightning Application File | It is used for call the component and preview on browser.. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : lwcIfElseCondition.html
SFDX:Lightning Web Component >> New >> lwcIfElseCondition.html
lwcIfElseCondition.html [Lightning Web Component HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template > <lightning-card title="How does works If & Else Condition in Lightning Web Component - LWC" custom-icon="custom:icon14"> <div class="slds"> <template if:true={getShowContainer}> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_3-of-12"> <img src="https://www.w3web.net/wp-content/uploads/2020/12/contactsBasedAccountNameFeature.jpg" width="100%" height="auto"></img> </div> <div class="slds-col slds-size_9-of-12"> <p><b>How to display account related contacts based on account name using search input and click button in Salesforce lightning web component – LWC</b></p><br/> <p>Hey guys, today in this post we are going to learn about How to display account related contacts based on account name using search input and click button in Salesforce lightning web component – LWC. Files we used in this post example: displayContactsOnAccountName.html Lightning Web Component HTML It is Templae HTML file for used to write HTML …</p><br/> <p><span class="readMore"><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">Read more...</a></span></p> <br/><br/> <lightning-button label="Hide Container Data" variant="brand" size="small" onclick={hideContainerData} icon-name="utility:chevronup" icon-position="right"></lightning-button> </div> </div> </template> <template if:false={getShowContainer}> <lightning-button label="Show Container Data" variant="brand" size="small" onclick={showContainerData} icon-name="utility:chevrondown" icon-position="right"></lightning-button> </template> </div> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : lwcIfElseCondition.js
SFDX:Lightning Web Component >> New >> lwcIfElseCondition.js
lwcIfElseCondition.js [LWC JavaScript File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { api, LightningElement } from 'lwc'; export default class LwcIfElseCondition extends LightningElement { @api getShowContainer = false; showContainerData(event){ this.getShowContainer = true; window.console.log('getShowContainer # ' + this.getShowContainer); } hideContainerData(event){ this.getShowContainer = false; } } |
Step 3:- Create Lightning Web Component : lwcIfElseCondition.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcIfElseCondition.js-meta.xml
lwcIfElseCondition.js-meta.xml [LWC Meta Data XML]
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle> |
Start Lightning Application
Step 4:- Create Lightning Application : lwcApp.app
From Developer Console >> File >> New >> Lightning Application
lwcApp.app [Component Application File]
|
1 2 3 |
<aura:application extends="force:slds"> <c:lwcIfElseCondition/> </aura:application> |
Further post that would you like to learn in LWC
Related Topics
How to display account related contacts based on account name using search input and click button in Salesforce lightning web component – LWC
How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC
Fetching picklist values dynamically through apex class method and display selected picklist value in Salesforce lightning web component – LWC
How to Communicate Between Parent to Child and Passing the Value from Parent Component to Child component in Lightning Web Component — LWC
useful tips
It is help to increase the knowledge and know about the template, Thanks