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

We used to add the if:true|false directive to a nested <template> element that enclosed the conditional content to render HTML conditionally. Nevertheless, with Spring 23, we may use new lwc:if, lwc:elseif, and lwc:else to do Conditional Rendering in LWC.

In this blog article, we will discuss the lwc:if, lwc:elseif, and lwc:else conditional directives that were added in the Spring'23 release. We will also look at how the lwc:if, lwc:elseif, and lwc:else conditional directives supplant the old if:true and if:else directives.

What Is Conditional Rendering?

Conditional rendering is a method of displaying components or elements based on a given circumstance in the lightning web component (lwc).

This template has a Show Message checkbox. The handleChecboxChange function sets the value of the showMessage property when a user chooses or deselects the checkbox. If the showMessage attribute is set to true, the lwc:if directive shows the nested template Good Morning! Otherwise, it will show select the checkbox to see the message!.

<!-- conditionalRendering.html -->
<template>
    <lightning-card title="ConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show Message" onchange={handleChecboxChange}></lightning-input>
            <template lwc:if={showMessage}>
                <div class="slds-m-vertical_medium">
                    Good Morning!
                </div>
            </template>
            <template lwc:else>
                <div class="slds-m-vertical_medium">
                  <b>  select the checkbox to see the message ! </b>
                </div>
            </template>
        </div>
    </lightning-card>
</template>

It is important to note that the JavaScript does not affect the DOM; instead, it merely changes the value of a property.

// conditionalRendering.js
import { LightningElement } from 'lwc';
export default class ConditionalRendering extends LightningElement {
    showMessage = false;

    handleChecboxChange(event) {
        this.showMessage=event.target.checked; 
    }
}

How to create and run Node.js project in VS code editor ?

   Step 1: Create an empty folder and move it into that folder from your VS Code                           editor, use the following command.

mkdir pro
cd pro

Step 2: Now create a file app.js file in your folder as shown below.

Step 3: Installing Module: Install the modules using the following command.

npm install express

npm install nodemon

Step 4: Add these two commands which are important for running and dynamically running the code after changes made in your Node.js app respectively in package.json file.

{
  "name": "pro",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.12"
  }
}
Step 5: Write down the following code in app.js file.
// Requiring module
const express = require('express');
 
// Creating express object
const app = express();
 
// Handling GET request
app.get('/', (req, res) => {
    res.send('A simple Node App is '
        + 'running on this server')
    res.end()
})
 
// Port Number
const PORT = process.env.PORT ||5000;
 
// Server Setup
app.listen(PORT,console.log(
  `Server started on port ${PORT}`));
Step 6: Run the application using the following command:
npm run dev
Step 7: Now go to http://localhost:5000/  in your browser, you will see the following output: