Angular Custom Clickaway Listener Is Triggered If A Child Component Is Removed Using *ngIf

I have a clickaway listener as a directive that uses @HostListener put on App.component.ts @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls:

Solution 1:

In practice, setTimeout() tells the browser to invoke the function when it has finished running the event handlers for any currently pending events and has finished updating the current state of the document. source

Try setting the delay to 0 for a more elegant solution. Calling setTimeout with a delay of 0 (zero) milliseconds doesn't execute the callback function after the given interval. The execution depends on the number of waiting tasks in the queue. source

Your problem is interesting and requires some nip and tuck. I believe you already have the answer. Since you want to do 2 seperate things with the click event, you need to time them according to your preference.

Other possible solutions include using a boolean variable isHandled: boolean in your service to avoid an execution. Or something like pushing the current clicked target (not the document clicked target) to your service and do additional checks.

Solution 2:

I'm not familiar with click away, but would something like this work?

<div [clickaway]="doSomething()"> 
  <button *ngIf="isVisible" (click)="isVisible=false">close</button>
</div>

doSomething() {
  if(this.isVisible) {
  }
}

Solution 3:

Try to change the *ngIf:

  <span *ngIf="isVisible">
    <button (click)="closeSpan()">close</button> //closeSpan() sets isVisible to false.
  </span>

For hidden:

  <span [hidden]="!isVisible">
    <button (click)="closeSpan()">close</button> //closeSpan() sets isVisible to false.
  </span>