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

Solution 1:

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