Angular directive to (conditionally) track focusout outside of an element (children are ignored)

example.html

div [my-focusout-outside]="shouldTrack" (focusoutOutside)="doSomething()">Hello</div>

focusout-outside.directive.ts

import {
  Directive,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  OnDestroy
} from '@angular/core';

@Directive({
  selector: '[my-focusout-outside]'
})
export class FocusoutOutsideDirective implements OnDestroy {
  @Input()
  set 'my-focusout-outside'(listen: boolean) {
    if (listen) {
      document.addEventListener('focusout', this.onFocusout);
    } else {
      document.removeEventListener('focusout', this.onFocusout);
    }
  }

  @Output() focusoutOutside = new EventEmitter<void>();

  constructor(private elementRef: ElementRef) {}

  private onFocusout = (_event: any) => {
    // note: next TS release probably uses FocusEvent correctly
    // see https://github.com/microsoft/TSJS-lib-generator/pull/696
    const event: FocusEvent = _event;
    
    // ignore switching to something completely different (e.g. dev tools)
    if (event.relatedTarget === null) return;

    const focusInside = this.elementRef.nativeElement.contains(
      event.relatedTarget
    );
    if (!focusInside) {
      this.focusoutOutside.emit();
    }
  };

  ngOnDestroy() {
    document.removeEventListener('focusout', this.onFocusout);
  }
}