Hide-show Element in Lightning web component

Hello friends 👋! Let us understand how to show and hide an element or component inside the Lightning Web Component. I have shared multiple ways to set the visibility.

To set the visibility of any element we can use them if:true or if:false attributes.
Let's see the different ways to do this.

Using condition on template


    <lightning-input onchange={handleChange} type="toggle" label="Show" name="input1"></lightning-input>
    <template if:true={show}>
        <div class="slds-box">
            <p>Showing when show is true</p>

JS Code

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    show = false;
        this.show = event.target.checked;


Element hidden (lwc)
Element is hidden

Element is visible
Element is visible
No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com