Lightning Components

Conditional Rendering in LWC using lwc:if, lwc:elseif and lwc:else

Curriculum

• What is Conditional Rendering in LWC?
• Conditional Rendering in LWC using lwc:if, lwc:elseif and lwc:else.
• if:true and if:false
• Consideration For Lwc:If, Lwc:Elseif And Lwc:Else

What is Conditional Rendering in LWC?

Conditional rendering in the lightning web component (lwc) is a way to display components or elements based on a specific condition. For instance, you can display different greeting messages depending on the time of day.

Conditional Rendering in LWC using lwc:if, lwc:elseif and lwc:else.

Let see how to use lwc:if, lwc:elseif and lwc:else in lightning web components. With the new lwc:if, lwc:elseif, and lwc:else conditional directives, the property getters are accessed only one time per instance of the directive. Here is an example of how we can use it.

<template>
    <template lwc:if={expression1}>
        Statement 1: Hi
    </template>
    <template lwc:elseif={expression2}>
        Statement 2 : Hello
    </template>
    <template lwc:else>
        Statement 3 : How are you?
    </template>
</template>

The legacy if:true and if:else directives are no longer recommended as Salesforce intends to deprecate and remove these directives in the future. Salesforce recommend that you replace their usage with the new conditional directives to future-proof your code

if:true and if:false

This is conditional rendering using if:true and if:false:

<template>
 <template if:true={condition1}> Hello Apex Hours </template>
 <template if:false={condition1}>
 <template if:true={condition2}> If </template>
 <template if:false={condition2}> Else </template> </template> </template>

Consideration for lwc:if, lwc:elseif and lwc:else

• You can’t precede lwc:elseif or lwc:else with text or another element.
• you can’t have a <div> tag that comes after lwc:if and before lwc:else
• Complex expressions like !condition or object?.property?.condition aren’t supported. To evaluate complex expressions, use a getter in your JavaScript class.

Example of if:true condition

• First, create a component called templateTrueDemo
• Add the following code to the templateTrueDemo.js, templateTrueDemo.html and templateTrueDemo.js-meta.xml

templateTrueDemo.js:

 import { LightningElement, track } from "lwc";
export default class TemplateTrueDemo extends LightningElement {
  //if:true demo logic
  @track showText = false;
  showHandler() {
    this.showText = true;
  }
}   
    

templateTrueDemo.html:

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

templateTrueDemo.js-meta.xml

   <?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 demo explanation

• if: true directive shows the DOM(Document object model) only if the condition/expression is true.
• As shown in the above example, the text will only be visible
• if showText property will become true
• We are using showHandler method to change the showText property to true showHandler will gets triggered on click of a button

if:true demo Output

After placing the component on the page, you will see the following output.

Example of if:false condition

• First create a component called templateFalseDemo
• Add the following code to the templateFalseDemo.js, templateFalseDemo.html and templateFalseDemo.js-meta.xml

templateFalseDemo.js

 import { LightningElement, track } from "lwc";
export default class TemplateFalseDemo extends LightningElement {
  //if:false demo logic
  @track hideText = false;
  hideHandler() {
    this.hideText = true;
  }
}   
    

templateFalseDemo.html

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

templateFalseDemo.js-meta.xml

    <?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 demo explanation

• 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.
• As shown in above example, text will only be hidden if hideText property will become true
• We are using hideHandler method to change the hideText property to true hideHandler will gets triggered on click of button

if:false demo Output

After placing the component on the page, you will see the following output.

Example of toggle condition

• First create a component called templateToggleDemo
• Once templateToggleDemo component gets created add templateToggleDemo.css file to the folder
• Add the following code to the templateToggleDemo.js, templateToggleDemo.html and templateToggleDemo.js-meta.xml

templateToggleDemo.js

    import { LightningElement, track } from "lwc";
export default class TemplateToggleDemo extends LightningElement {
  @track toggleText = true;
  toggleHandler() {
    this.toggleText = !this.toggleText;
  }
}
    

templateToggleDemo.html

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

templateToggleDemo.js-meta.xml

  <?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>  
    

toggle demo explanation

• Toggle means flip-flop, we will hide and show the text on click of the same action
• As shown in the above example, the text will only be hidden if hideText property will become true
• We are using if:false condition and binding the toggleText which is initialized to true. It means that load data will be visible.
• We have bind the toggleHandler method to the button on click of a button, we are toggling the value of toggleText. Initially, it was true on the first click it becomes false on the second click again it becomer true and so.

toggle demo Output

After placing the component on the page, you will see the following output.

Example of on change condition

• First create a component called templateOnChangeDemo

Add the following code to the templateOnChangeDemo.js, templateOnChangeDemo.html and templateOnChangeDemo.js-meta.xml

templateOnChangeDemo.js

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

templateOnChangeDemo.html

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

templateOnChangeDemo.js-meta.xml

<?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>

on change demo explanation

• There are many scenario in which we have to hide or show HTML based on some calculation
• To compute a value for the property, we have to use a JavaScript getter.

In above example, text will be visible if you type the Hello word in the textbox.

on change demo Output

After placing the component on the page, you will see the following output.