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

HTML Code

<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>
        </div>
    </template>
</template>

JS Code

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

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

Outputs

Element is hidden

Element is visible