Forcetrails: 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 hidden (lwc)
Element is hidden

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

Hi there, comments on this site are moderated, spams and promotions will be deleted. If you have any concern, or if you are not able to comment for some reason, reach email us at rahul@forcetrails.com