How to get the active Element (the focused one) on Angular 6?

Question

-- Not duplicate! Since the other questions are outdated. Not duplicate with the asked question!!!!

this.elm.nativeElement.ownerDocument.activeElement

also

document.activeElement

gives me strangely enough the whole body.How can i just get the current focused element?

• elm = type of ElementRef which is bound in my component's constructor.

• from another question here: this.renderer.invokeElementMethod is also not callable since Renderer is now deprecated and Renderer2 does obviously not have that method anymore.

EDIT: This question answers this problem partially:

document.activeelement returns body

Between leaving the old element and entering the new element the active element is indeed the document/body itself.

Answer 1

I had to cover "document.activeElement" or "this.elm.nativeElement.ownerDocument.activeElement" inside a timeout, so that the active element is checked by the next angular lifecycle. Otherwise, when "X.activeElement" is executed just after the focus change, you get the whole body since while entering the new element the active element is indeed the document/body itself.

setTimeout(function() {
  X = document.activeElement;
});

Edit für ES6 (where "this" also can be used):

setTimeout(() => {
  X = document.activeElement;
});