Chapter 13: Conditional Rendering in Lightning Web Component

Hello friends, in this chapter we will learn about conditional rendering in Lightning Web Component

What is Conditional Rendering?

If you want to hide some of the components from the HTML and show it based on conditions then use conditional rendering.

How to achieve conditional rendering in LWC?

To render a DOM element in a template only when certain conditions are met, we use conditional rendering.

Like Aura Components <Aura:if>, apex (if, else) the same way we have <template if:true> and <template if:false>in Lightning web component.

Render when condition evaluates to true

If the value of the if:true expression changes and evaluates to false, all the components inside the <template if:true= {}> tag are destroyed. The components are created again if the if:true expression changes again and evaluates to true.

Render when condition evaluates to false

If the value of the if:false expression changes and evaluates to true, all the components inside the <template if:false= {}> tag are destroyed. The components are created again if the if:false expression changes again and evaluates to false.

Example 1: On clicking the checkbox CEO of Google should show

app.html

<template>
  <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
      <div class="slds-m-around_medium">
          <lightning-input type="checkbox" label="Show CEO of Google" onchange={handleChange}></lightning-input>
         
          <template if:true={areDetailsVisible}>
            <div class="slds-box">
             <div class="slds-grid slds-gutters">
             <div class="slds-col slds-size_1-of-3">
            <span>

            <img src="https://content.fortune.com/wp-content/uploads/2015/10/gettyimages-490529570.jpg">
            </span>
            </div>
        <div class="slds-col slds-size_2-of-3">

         <p>Sundar Pichai</p>
            </div>
            </div>
            </div>
            <br>
   
          </template>
      </div>
  </lightning-card>
</template>

app.css

p {
    font-weight:bolder;
    font-size:30px;
     display: flex;
  justify-content: center;
  align-items: center;

}

app.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
     areDetailsVisible = false;

    handleChange(event) {
        this.areDetailsVisible = event.target.checked;
    }
}

Understanding Code Line by Line

<lightning-input type=”checkbox” label=”Show CEO of Google” onchange={handleChange}></lightning-input>

There is a checkbox with onChange event handler in HTML

areDetailsVisible = false;

Initally in Javascript, there is a property, areDetailsVisible which is set to false

<template if:true={areDetailsVisible}>

This is the line in HTML which says show the content only when areDetailsVisible is set to true

handleChange(event) { this.areDetailsVisible = event.target.checked; }

Now when areDetailsVisible becomes true then show the content

Now Lets have some fun with conditional Rendering

Show Timon and Pumba on Button Click

conditionalRendering.html

<template>
    <div>
        <template if:true={isTimon}>
            <img src="https://i.dlpng.com/static/png/222274_preview.png"
            width="200"
            height="200"
            />
 
    </template>
        <template if:true={isPumba}>
            <img src="https://i.dlpng.com/static/png/26298_preview.png"
                width="200"
                height="200"
            />
        </template>
        
    </div>
    <div class="slds-m-around_small">
 
        <lightning-button label="Show Timon" 
            onclick={showTimon} 
        ></lightning-button>
 
        <lightning-button label="Show Pumba" 
            onclick={showPumba} 
        ></lightning-button>
 
    </div>
    
</template>

conditionalRendering.js

import { LightningElement } from 'lwc';

export default class ConditionalRendering extends LightningElement {

    isTimon = false;
    isPumba = false;

    showTimon(){
        this.isPumba = false;
        this.isTimon = true;
    }

    showPumba(){
        this.isPumba = true;
        this.isTimon = false;
    }

}

Bonus Example:

On Click of Check Box “It is Corona”. A message and Image of wear mask should appear

<template>
    <lightning-card title="helloConditionalRendering" icon-name ="custom:custom14">
       <lightning-input type="checkbox" label="It is corona" onchange={handleChange}>
       </lightning-input>
       <template if:true={areDetailsVisible}>
       <p>  
           Wear Mask
       </p>
       <img src="https://media1.giphy.com/media/JRsY1oIVA7IetTkKVO/source.gif"
       >
    </template>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class ConditionalRendering extends LightningElement {
    
    areDetailsVisible = false;
handleChange(event){
   this.areDetailsVisible = event.target.checked;
   console.log('areDetailsVisible:'+ this.areDetailsVisible);
}
}

img{
    width:300px;
}
p{
    background-color: cornsilk;
}

Task for you : Switch Bulb on and off using Lightning Web Component

Together we can learn faster !

Join LWC study group on Telegram 

Subscribe to Youtube channel and blog to get latest updates