Get reference to currently active HTMLElement

The activeElement of the document can be any Element, not just an HTMLElement. At compile time the compiler does not know what type the element will be. Hence, if you surround the call with an instanceof check, the compiler knows the activeElement has to be an HTMLElement for the code to execute and allows the reference.

if (document.activeElement instanceof HTMLElement) {
  document.activeElement.blur();
}

This approach does not require you to jump through hoops of getting different Angular bindings to execute the method that is already available to you. Less code and less dependencies!


Inject a Renderer into your component/directive.

Get a hold of any elementRef (for example your button or link).

constructor(private elRef: ElementRef, private renderer: Renderer){
}

then in your handler function:

this.renderer.invokeElementMethod(
     this.elRef.nativeElement.ownerDocument.activeElement, 'blur');