Hide/show Button in LWC

Question

I'm new to LWC in salesforce and want to hide/show the button based status. I write below code but it is hiding for all statuses. Can you please help me if am wrong.

 <template for:each={savedCampaignList} for:item="savedCampaignListvar">
       <a name={savedCampaignListvar.Id} >View</a> 
        &nbsp;|&nbsp; 
      <a hidden =!IF(savedCampaignListvar.Status === 'Saved')" name={savedCampaignListvar.Id} >Delete</a>

</template>

score 4 · Answer 1 · answered Sep 13 '19 at 17:08

4

Expressions are different in LWC than in aura and visualforce

You need to have a getter defined in your controller the template uses for expressions or have a tracked variable you update.

See this for migrating to lwc

You'll end up making a getter like this

get hideLink() {
    return this.savedCampaignListvar.Status === 'Saved';
}

and then in your lwc markup you should have this

<template if:false={hideLink}>
    <a name={savedCampaignListvar.Id}>Delete</a>
</template>

Note: the hidden attribute is not a boolean attribute. If the attribute exists regardless of setting it to true/false hides the element. See here

answered Sep 13 '19 at 17:08

TemporaryFix

2,008
3
30
54

Thanks. But i have a loop here to get status for each campaign and based on the campaign status should be hide or show. i will update complete code. – RKCY Sep 13 '19 at 17:14
@RKCY pass each item as a property to a sub component and do the check there, or add a property to each item in the collection on whether or not to show the item – TemporaryFix Sep 13 '19 at 17:23

score 0 · Answer 2 · answered Nov 25 '19 at 21:19

Use this code in your HTML template - remember don't put any attribute in your root 'template' element use another div as a holder for for:each directive. You must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time.

<template>
   <div for:each={savedCampaignList} for:item="savedCampaignListvar" key={savedCampaignListvar.Id}>
     <a name={savedCampaignListvar.Id} >View</a> 
                    &nbsp;|&nbsp; 
     <a if:true={savedCampaignListvar.shouldShow} name={savedCampaignListvar.Id} >Delete</a>
   </div>
</template>

We can use connectedCallback function - it's build in LWC function called when the element is inserted into a document. There we can put some condition and add 'shouldShow'(you can call if whatever you want of course;)) attribute to our Objects inside the array. Based on this attribute we will show delete button or not. Your JS should looks like:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track savedCampaignList = [
        {Id: "1", status: 'Saved'},
        {Id: "2", status: 'Not Saved'}
    ]

    connectedCallback() {
        this.savedCampaignList.forEach((el)=> {
            el.shouldShow = el.status === 'Saved';
        })
    }
}

score -1 · Answer 3 · answered Dec 13 '19 at 10:54

-1

You can use if:true or if:hide. Go through this https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component

answered Dec 13 '19 at 10:54

nikhil karkra

57
2

Hide/show Button in LWC

3 Answers3