0

parent.html

<a href="" onclick= {handleclick}> click here</a>
<c-modal open = {openModal}>

Paren.js

@track openModal;

  handleclick(){

   this.openModal = true;
}

when I close the Modal in the "modal" component , how do I communicate it back to the parent component or how do I change back the value of reactive property to false after click operation.

3

Can use custom events. Example: hmtl

<a href="" onclick= {handleclick}> click here</a>
<c-modal onclose={handleModalClosed} open = {openModal}>

js

@track openModal;

  handleclick(){

   this.openModal = true;
  }

  handleModalClose() {
   this.openModal = false;
  }

c-modal:

closeModal() {
  //do modal close stuff
  this.dispatchEvent(new CustomEvent('close'));
}
| improve this answer | |
5

Child-to-parent communication is always done with events.

<c-modal open={openModal} onclose={notifyClose}></c-modal>

...

// in modal
this.dispatchEvent(new CustomEvent('close'));

...

// in parent
notifyClose() {
    this.openModal = false;
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.