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

button-focus-remover.ts

import { Directive, HostListener, ElementRef, Renderer } 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, private renderer: Renderer) { }

  @HostListener('click') onClick() {
    this.renderer.invokeElementMethod(this.elRef.nativeElement, 'blur', []);
  }
}

Thanks so much this worked fantastic in my app!

@gforcedev 😃 👍

i think this is a good solution

For Angular 9 and upper used blur() because Renderer is outdated.

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();
  }
}

updated gist, thanks @vitaliidasaev

@AlejandroPerezMartin is this available under MIT license, no default license for github gists unlike stackoverflow

no license @AbhinavAtul, use it the way you want! it's a really simple script so I don't think it's needed

Works great, thanks !

Please @AlejandroPerezMartin how am I going to use this Directive?
Can I implement it for Angular 8?

Please @AlejandroPerezMartin how am I going to use this Directive?
Can I implement it for Angular 8?

I'm not using Angular anymore so I'm not sure, but I believe you can use a previous version of this gist: https://gist.github.com/AlejandroPerezMartin/ecd014cb8104c235b582f3a3e1649cf7/0bff5561689e5cbbfa878fab3bc2ec716e58eb58

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👌