How to take DOM element from template inside the component's class?

My use-case is getting the bounding client rect internally and use it to position a viewport-relative container (a context menu).

Angular allows you to use @ViewChild('hashedId') someVar!: T; to retrieve the element. However, the beginner documentation didn't tell it was an ElementRef directly: it only tells that in the API (and uses the term "selector", which made me think it was the CSS selector).

It just works, because ElementRef contains a nativeElement (the DOM element). The hashedId is that thing (which the API referred to as selector):

<tag #hashedId/>

In my case, hashedId, within the entire template, was said to be a HTMLDivElement (an Element).

I wrote this:

@ViewChild('containerElement')
private containerElement!: Element;

// ...

ngAfterViewInit(): void {
  console.log(this.containerElement);
}

I got no compile-time error even in the IDE. And it logged an ElementRef at the console. I know that's because TypeScript isn't a sound language and maps to untyped JavaScript, but I thought Angular would correct this by itself with its own build system?

@ViewChild('containerElement')
private containerElement!: ElementRef;

The decorator is not bound to the type of the variable.

That's why it doesn't "map" to the correct type.

This is something you "need" to know when you use angular (although it is indeed in the documentation).

Usually, you log the variable and it gives its type, that's the easy way to know it.

If you think it's possible for angular to "map" to the correct type, try making a feature request (or even a pull request ?) on their repo !