\n<\/p>\n
Conditional rendering is a powerful feature in LWC that allows you to dynamically show or hide content based on specific conditions. <\/p>\n
Starting from Spring\u201923, Salesforce introduced new directives for conditional rendering: This snippet will be helpful for how to display different greetings based on the user\u2019s name:<\/p>\n In this case, the If not, the If the first two fail, the You can use conditional rendering with loops to display different content for each item in the loop. Let\u2019s see the example.<\/p>\n In this example, the You can use conditional rendering to show or hide form elements based on user input.<\/p>\nlwc:if<\/code>, lwc:elseif<\/code>, and lwc:else<\/code>. These directives are more recommended than the legacy if:true|false<\/code> .<\/p>\nFirst One: Simple Conditional Rendering<\/h2>\n
\n \n Hi Jack, welcome back!\n <\/template>\n \n Hello Rock, how are you doing today?\n <\/template>\n \n Hi there!\n <\/template>\n<\/template>\n<\/pre>\n
lwc:if<\/code> directive checks if the userName<\/code> property is equal to \u2018Jack\u2019. Here the first template will show. <\/p>\nlwc:elseif<\/code> directive checks if the userName<\/code> property is equal to \u2018Rock\u2019. Now, the second template will show. <\/p>\nlwc:else<\/code> template is rendered.<\/p>\nSecond One: Conditional Rendering with Loops<\/h2>\n
\n \n<\/template>\n<\/pre>\n
for:each<\/code> loop iterates over the products<\/code> array. For each product, the lwc:if<\/code> directive checks if the quantity<\/code> property is equal to 0. If it is, the \u201cSold Out\u201d message is displayed.<\/p>\nFinal One: Conditional Rendering with Forms<\/h2>\n
\n