Angular 9+ Directive to remove focus after clicking the specified selector/s

button-focus-remover.ts

import { Directive, HostListener, ElementRef } from '@angular/core';

/**
 * This directive removes focus from the selectors after clicking on them
 */
@Directive({
  selector: 'button, a' // your selectors here!
})
export class FocusRemover {
  constructor(private elRef: ElementRef) {}

  @HostListener('click') onClick() {
    this.elRef.nativeElement.blur();
  }
}

ok thanks

very nice!

In my case, it has to be wrapped with setTimout() like this otherwise the timing messes up with it to function properly:

@HostListener('click')
onClick() {
setTimeout(() => this.elRef.nativeElement.blur());
}

Thanks👌