+ Start a Discussion
Khalid mnKhalid mn 

How to do toggle inactive on click of cancel button in lwc

Hi, 
I have a requirement can someone help me out..
 on toggle when i click then one modal will opne on modal there will a save and cancel button whn i click cancel then toggle will be inactive when i click save toggle will be active..
User-added image
 
Best Answer chosen by Khalid mn
mukesh guptamukesh gupta
Hi khalid,

Please use below code:-
<template>

    <lightning-input type="toggle" 
    label="Tagging option" 
    onchange={changeToggle} 
    checked={IsActive} 
    name="input1">
</lightning-input>


<template if:true={openModal}>  
    <div class="slds-modal slds-fade-in-open slds-backdrop">  
      <div class="slds-modal__container">   
        <div class="slds-modal__content slds-p-around_medium">
            <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
            <div class="slds-text-heading_large"> Would you like to apply field to your documents?</div>
            <h1>If these documents were setup fro auto-tagging, 
                we will be able to read them
                and automatically place the fields on your document
            </h1> 
        </div>
        <!---Footer Section-->  
        <div class="slds-modal__footer">  
          <lightning-button label="Cancel" variant="outline-brand" onclick={closeModal}>  
          </lightning-button>
          <lightning-button label="Apply" variant="brand" onclick={applyModal}>  
        </lightning-button> 
        </div>  
      </div>  
    </div>  
  </template> 


</template>
 
import { LightningElement , track} from 'lwc';

export default class ToggleWithModal extends LightningElement {

  @track openModal = false;
  @track IsActive = false;
    changeToggle(event){
       if(event.target.checked){
            this.IsActive = true;
            this.openModal = true;
        }else{
            this.openModal = false;
        }

        
    }

    closeModal(){
        if(this.IsActive){
            this.IsActive = false;
        }
       // alert('close-->>> '+this.IsActive);
      //this.openModal = false;

     
    }

    applyModal(){
        //alert('Apply-->>> '+this.IsActive);
        if(!this.IsActive){
            this.IsActive = true;
        }
        
       // this.openModal = false;
    }

}

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh


 

All Answers

mukesh guptamukesh gupta
Hi khalid,

Please use below code:-
<template>

    <lightning-input type="toggle" 
    label="Tagging option" 
    onchange={changeToggle} 
    checked={IsActive} 
    name="input1">
</lightning-input>


<template if:true={openModal}>  
    <div class="slds-modal slds-fade-in-open slds-backdrop">  
      <div class="slds-modal__container">   
        <div class="slds-modal__content slds-p-around_medium">
            <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
            <div class="slds-text-heading_large"> Would you like to apply field to your documents?</div>
            <h1>If these documents were setup fro auto-tagging, 
                we will be able to read them
                and automatically place the fields on your document
            </h1> 
        </div>
        <!---Footer Section-->  
        <div class="slds-modal__footer">  
          <lightning-button label="Cancel" variant="outline-brand" onclick={closeModal}>  
          </lightning-button>
          <lightning-button label="Apply" variant="brand" onclick={applyModal}>  
        </lightning-button> 
        </div>  
      </div>  
    </div>  
  </template> 


</template>
 
import { LightningElement , track} from 'lwc';

export default class ToggleWithModal extends LightningElement {

  @track openModal = false;
  @track IsActive = false;
    changeToggle(event){
       if(event.target.checked){
            this.IsActive = true;
            this.openModal = true;
        }else{
            this.openModal = false;
        }

        
    }

    closeModal(){
        if(this.IsActive){
            this.IsActive = false;
        }
       // alert('close-->>> '+this.IsActive);
      //this.openModal = false;

     
    }

    applyModal(){
        //alert('Apply-->>> '+this.IsActive);
        if(!this.IsActive){
            this.IsActive = true;
        }
        
       // this.openModal = false;
    }

}

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh


 
This was selected as the best answer
Khalid mnKhalid mn
Thank You So much Mukesh Gupta..