Uses of the hash symbol (#) in Angular?

Question

I'm pretty new to html/CSS/Angular, and I have a question about something I've been using for a while, but realized that I don't quite understand its significance: the hash symbol (#).

This symbol is used a lot in Angular --

Assuming there exists some element:

<some-element id="my-element" #myElement></some-element>

These two variables, myElementById and myElementByHash, seem to be functionally identical:

let myElementById = document.getElementById("my-element");

@ViewChild("myElement") someElement;
let myElementByHash = this.someElement.nativeElement;

Additionally, these hash names are used in a lot of Angular components, e.g. when using mdMenu, one gives an mdMenu element <some-menu> a reference name #someMenu, which will be used as the target of the [mdMenuTriggerFor] binding.

The hash symbol is overloaded with different types of uses in the world of web development -- it functions as a URL fragment identifier, CSS id selector, as well as this "reference name" identifier in the Angular apps I have worked on. Because of its many uses, it have been very difficult for me to find a clear explanation online of what this symbol actually does.

So, SO, my questions to you are

1. What is the significance of the hash symbol (#), OR where can I find the documentation explaining this?

2. What are the similarities/differences in usage between the hash symbol and the id property of an element?

Thanks!