Simple Hide and Show in Lightning Web Component in Salesforce

Simple Hide and Show in Lightning Web Component in Salesforce

template if:true can be used to Hide and Show in Lightning Web Component in Salesforce.

Sample Code:

Lightning Web Component:

Component HTML:

<template>  
      
    <lightning-button variant="brand" label={clickedButtonLabel} title="Show" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>  
  
    <template if:true={boolVisible}>  
  
        <div>Testing Hide and Show</div>  
          
    </template>  
  
</template>  

Component JAVASCRIPT:

import { LightningElement, track } from 'lwc';  
  
export default class HideAndShowLWC extends LightningElement {  
  
    @track clickedButtonLabel = 'Show';  
    @track boolVisible = false;  
  
    handleClick(event) {  
        const label = event.target.label;  
  
        if ( label === 'Show' ) {  
  
            this.clickedButtonLabel = 'Hide';  
            this.boolVisible = true;  
  
        } else if  ( label === 'Hide' ) {  
              
            this.clickedButtonLabel = 'Show';  
            this.boolVisible = false;  
  
        }  
    }  
  
}  

Output:

Leave a Reply