CODEWITHSUNDEEP
javascriptangulartypescripteventsstoppropagation
Mardari
Mardari

Reputation: 1163

Angular, resume event propagation

When user click a button there is a directive that catches this event and stops it. Then an modal is opened witch asks for user confirmation. If user confirms then I need to resume previously event.

How do I resume stopped event?

example: 

 markAsSeen($event) : void {

    // pause whatever user wanted to click
    $event.stopPropagation(); 

    // open modal and ask user for confirmation
    let modalInstance = this.modalService.openConfirmationModal();

    // on modal close, if positive event continue whatever user clicked
    modalInstance.onClose((response) => {
       if(response) {
          // this line should resume $event
          $event.originalEvent(); // how to achieve this?
       } 
    }) 
}

Upvotes: 0

Views: 1312

Answers (1)

andrea06590
andrea06590

Reputation: 1299

For me this is two different events, the first one is here to openModal but looks useless (why don't you just open a modal ?), the second one to confirm when the user clicked Confirm.

For me that's the easiest way : if you need the first event emitter, then only open the modal, the second one start the confirmation process if positive. The other way could be to add a "status" variable in your confirmation -1 for not started (= modal closed), 1 for positive confirmation, 0 in progress.

Finally to avoid user to click away, use something like 

onClick(event) {
if (!this.element.nativeElement.contains(event.target)) {
      closeModal(); // or not
    }
}

Where event.target is the clicked target

Edit : onClick must be added to @Component 

@Component({selector..., host: {
    '(document:click)': 'onClick($event)',
  }});

Upvotes: 1

Related Questions