Conditional rendering is a powerful feature in LWC that allows you to dynamically show or hide content based on specific conditions.
New Directive In LWC:
Starting from Spring’23, Salesforce introduced new directives for conditional rendering: lwc:if, lwc:elseif, and lwc:else. These directives are more recommended than the legacy if:true|false .
First One: Simple Conditional Rendering
This snippet will be helpful for how to display different greetings based on the user’s name:
Hi Jack, welcome back!
Hello Rock, how are you doing today?
Hi there!
In this case, the lwc:if directive checks if the userName property is equal to ‘Jack’. Here the first template will show.
If not, the lwc:elseif directive checks if the userName property is equal to ‘Rock’. Now, the second template will show.
If the first two fail, the lwc:else template is rendered.
Second One: Conditional Rendering with Loops
You can use conditional rendering with loops to display different content for each item in the loop. Let’s see the example.
In this example, the for:each loop iterates over the products array. For each product, the lwc:if directive checks if the quantity property is equal to 0. If it is, the “Sold Out” message is displayed.
Final One: Conditional Rendering with Forms
You can use conditional rendering to show or hide form elements based on user input.
In this example, the onchange event handler updates the selectedOption property based on the user’s selection. The lwc:if directive then checks if the selectedOption property is equal to ‘option2’. If it is, the password field is displayed.
These are just a few basic examples of conditional rendering in LWC. You can use this feature to create a wide range of dynamic and interactive web applications.
