Simple Hide and Show in Lightning Web Component in Salesforce

Sample Code:

Component HTML:

  1. <template>  
  2.       
  3.     <lightning-button variant="brand" label={clickedButtonLabel} title="Show" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>  
  4.   
  5.     <template if:true={boolVisible}>  
  6.   
  7.         <div>Testing Hide and Show</div>  
  8.           
  9.     </template>  
  10.   
  11. </template>  

Component JAVASCRIPT:

  1. import { LightningElement, track } from 'lwc';  
  2.   
  3. export default class HideAndShowLWC extends LightningElement {  
  4.   
  5.     @track clickedButtonLabel = 'Show';  
  6.     @track boolVisible = false;  
  7.   
  8.     handleClick(event) {  
  9.         const label = event.target.label;  
  10.   
  11.         if ( label === 'Show' ) {  
  12.   
  13.             this.clickedButtonLabel = 'Hide';  
  14.             this.boolVisible = true;  
  15.   
  16.         } else if  ( label === 'Hide' ) {  
  17.               
  18.             this.clickedButtonLabel = 'Show';  
  19.             this.boolVisible = false;  
  20.   
  21.         }  
  22.     }  
  23.   
  24. }  

Output:

No comments:

Post a Comment