Angular, resume event propagation

Question

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?
       } 
    }) 
}

Check edit please,I need something like this question , but with angular 4^: https://stackoverflow.com/questions/7811959/how-to-continue-event-propagation-after-cancelling — Mardari, Oct 17 '17 at 14:34
You can fire the event again as explained in https://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element/36639596#36639596 — Günter Zöchbauer, Oct 17 '17 at 14:37
you can use Subject Behaviours to pass a message from the modal to the component method so that it will proceed the related action. Use the first event only to load the modal — Nadun Liyanage, Oct 17 '17 at 16:51

andrea06590 · Answer 1 · 2017-10-17T18:36:34.873

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)',
  }});

Angular, resume event propagation

1 Answers1

Linked