You need to sign in to do that
Don't have an account?
Conditional rendering in LWC UI issue
Hello everyone
I want to condtionally render a part of a LWC template. I have this in the template
<template if:true={areDetailsVisible}>
<div class="item" onclick={comingSoonAlert} style={bgAppointments}>
<div class="item_picto"><img src={iconAppointments} /></div>
<div class="item_title">{label.my_appointments}</div>
</div>
</template>
The issue is that the 'areDetailsVisible' visible variable is set based on a value in a record, which I retrieve in the connectedCallback:
areDetailsVisible = false;
connectedCallback() {
console.log('connected callback');
getUserContext({})
.then(result => {
console.log(result)
getCommunitySetting({market:result.cli_Market__c})
.then(commSet=>{
console.log(commSet)
var setting = JSON.parse(commSet);
console.log(setting)
this.areDetailsVisible = false//setting.cli_Editable_Customer__c;
})
.catch()
}).catch()
}
But now the value is first undefined ( false ) so the template is not rendered, but when it is set to true it is and it just shows and is not very UI friendly.
Can I somehow wait for the value from the callback and render after.
Check below examples for Conditional rendering in LWC that can help you with on your implementation.
https://rajvakati.com/2019/01/27/lightning-web-component-conditional-rendering/
https://www.sfdckid.com/2020/05/lwc-conditional-rendering-in-salesforce.html
https://www.sfdcpoint.com/salesforce/template-iftrue-conditional-rendering-lwc/
Thanks,