How to get DOM element on event in Anuglar?

Question

Angular

There is such a method in the project component on Angular 11, which listens for keystrokes on the keyboard

@HostListener('document:keydown', ['$event'])
  public someMethod(event: KeyboardEvent) {
    console.log('event', event);
  }

If I use the event.target property, I get a field of type EventTarget that has no properties and only 3 methods for working with events.

Actually, how do I get an element of type NodeList or HTMLCollection or something like that?
If you display the event itself in the console, then there will be a standard DOM structure of the component, but I can’t figure out how to use it from the component code.

Answer 1

If I use the event.target property, I get a field of type EventTarget that does not have any properties

That's right, because this is a generic type that cannot know where you got this event from. The source of the event is an object that implements the EventTarget interface, and the event does not need more.
You just need to state clearly what you are getting.

@HostListener('document:keydown', ['$event', '$event.target'])
  public someMethod(event: KeyboardEvent, target: HTMLElement) {
    console.log('event', event, target);
  }

Answer 2

constructor(private el: ElementRef) { }
Then use likethis.el.nativeElement