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: