Conditional Rendering in LWC

Salesforce Lightning Web Components allows the capability to conditionally render components or elements. If a specific condition is met, the elements or components can be rendered. 

Lightning Web Component has two directives for conditional rendering: 

  1. if:true 
  1. if:false  

In LWC, the directives can be enclosed in a <template> tag as shown below: 

<template if:true={expression}> 

  display when expression is true 


<template if:true={expression}> 

  display when expression is false 


The scenario mentioned below is to conditionally render a content based on the logged in user’s role. If the user’s role is Sales Strategy Manager, the content will be displayed or else the content will not be displayed. 

Conditional Rendering meta xml: 
<?xml version=”1.0″ encoding=”UTF-8″?> 

<LightningComponentBundle xmlns=””> 









In the meta xml, expose the lightning component and specify the targets to be used for lightning app page, record page and home page. 

Conditional Rendering html: 


    <lightning-card title=”Conditional Rendering in LWC” icon-name=”custom:custom14″> 

      <div class=”slds-m-around_medium”> 

        <template if:true={isManager}> 

            <div class=”slds-m-vertical_medium”> 

                Welcome {roleName}! Please click toggle below to view content                 


            <div class=”slds-m-around_medium”> 

                <div class=”slds-form-element”> 

                    <label class=”slds-checkbox_toggle slds-grid”> 

                      <span class=”slds-form-element__label slds-m-bottom_none”>Show Image</span> 

                      <input type=”checkbox” name=”checkbox-toggle-16″ value=”checkbox-toggle-16″ aria-describedby=”checkbox-toggle-16″ onchange={handleChange}/> 

                      <span id=”checkbox-toggle-16″ class=”slds-checkbox_faux_container” aria-live=”assertive”> 

                        <span class=”slds-checkbox_faux”></span> 

                        <span class=”slds-checkbox_on”>Enabled</span> 

                        <span class=”slds-checkbox_off”>Disabled</span> 




                <template if:true={isVisible}> 

                    <div class=”slds-m-vertical_medium”> 

                        <div><img src={pictureUrl}></div> 





        <template if:false={isManager}> 

            <div class=”slds-m-vertical_medium”>  

                Only Managers are allowed to view the content, you are a {roleName} 







The HTML uses nested if to conditionally display contents. The conditional rendering javascript sets the isManager property to true and the toggle gets displayed . It  has another if:true directive that displays the image when the toggle is enabled. 

Conditional Rendering js: 

import { LightningElement,wire, track } from ‘lwc’; 

import summer_logo from ‘@salesforce/resourceUrl/summer22logo’; 

import { getRecord } from ‘lightning/uiRecordApi’; 

import Id from ‘@salesforce/user/Id’; 

import ProfileName from ‘@salesforce/schema/User.UserRole.Name’; 

export default class Render_Conditional extends LightningElement { 

    isVisible = false; 


    pictureUrl = summer_logo + ‘/summer22logo.png’; 

    handleChange(event) { 

        this.isVisible =; 


    userId = Id; 

isManager = false; 

    @wire(getRecord, { recordId: Id, fields: [ProfileName] }) 

    userDetails({ error, data }) { 


        if (error) { 


            this.error = error; 

        } else if (data) { 

            if (data.fields.UserRole.value != null && data.fields.UserRole.value.fields.Name.value==’Sales Strategy Manager’) { 

                this.isManager = true; 

                this.roleName = data.fields.UserRole.value.fields.Name.value; 



                this.roleName = data.fields.UserRole.value.fields.Name.value; 




The javascript sets the value for isManager property based on the logged in user’s role and the second property isVisible is set based on the toggle change event.  

If the user with the role Sales Strategy Manager logs and loads the page, the content will be displayed with a toggle and based on the toggle, enable, or disable the image gets displayed. 
When logged in as Manager, the page renders as below. 

Graphical user interface, text, applicationDescription automatically generated 
If the user with the role other than Sales Strategy Manager logs and loads the page, the message                “Only Managers are allowed to view the below content, you are a Training Ordinator” is displayed. 

When logged in as Training Coordinator, the page renders as below, 


About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.