This platform is beautiful when it works, super frustrating when it doesn't. Any ideas? For some unknown reason I can't get the template to skip the branch when false, it is always rendering...


showSubmitButton = {showSubmitButton}
<template if:true={showSubmitButton}>
    <li class="slds-item">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_9-of-12 slds-medium-size_10-of-12 slds-large-size_3-of-12 ">
                <lightning-button variant="brand" label="Submit"  title="Submit" onclick={handleSubmitClick}></lightning-button>


@api showSubmitButton=false;
connectedCallback() {
    console.log(`bw: showSubmitButton = ${this.showSubmitButton}`);

call to the component

<c-test show-submit-button="false"></c-test>

console result

bw: showSubmitButton = false

page result

enter image description here

1 Answer 1


As per documentation

NOTE Setting show="false" evaluates to true. The only way to specify false in markup is to omit the boolean attribute.

You can do this in your callback:

    if(this.showSubmitButton === 'false') {
        this.showSubmitButton = false;

or you can omit the variable from the parent itself. and it should work.

If you really want to set the attribute dynamically then you need a getter in you parent component like this :

<c-test show-submit-button={computedValue}></c-test>

get computedValue(){
    return false;
  • Thank you so much, that was driving me crazy! Dec 21, 2020 at 0:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .