Angular custom clickaway listener is triggered if a child component is removed using *ngIf

Question

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: ["./app.component.css"],
})
export class AppComponent {
  constructor(private clickaway: ClickawayService) {}

  @HostListener("document:click", ["$event"]) documentClick(event: any): void {
    this.clickaway.target.next(event.target);
  }
}

@Directive({
  selector: "[clickaway]",
})
export class ClickawayDirective implements OnInit, OnDestroy {
  @Input() clickaway = null;

  private subscription: Subscription = null;
  constructor(
    private clickawayService: ClickawayService,
    private eleRef: ElementRef
  ) {}

  ngOnInit() {
    this.subscription = this.clickawayService.target.subscribe((target) => {
      if (!this.eleRef.nativeElement.contains(target)) {
        this.clickaway();
      }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

The ClickAway service just provides a subject to listen to document:click on the AppComponent .

I am using this directive on a div that has child controlled by *ngIf, something like:

<div [clickaway]="doSomething">
  <span *ngIf="isVisible">
    <button (click)="closeSpan()">close</button> //closeSpan() sets isVisible to false.
  </span>
</div>

The problem is whenever I click on close, it also triggers the clickaway's doSomething function.

I understand that *ngIf removes the span from dom thus when the directive runs .this.eleRef.nativeElement.contains(target) evaluates to false, since element is not there.

What I have tried so far is:

closeSpan() {
  setTimeout(() => this.isVisible = false, 100);
}

and moving the span out of view using position: absolute and very high offsets and removing *ngIf .

These solutions work, but I am seeking a more elegant way, preferably the directive itself handling such cases.

Thanks

Answer 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.

Answer 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) {
  }
}

Answer 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>