What does a `#` attribute do in HTML?

Question

I am writing a handler to do something to some element when a user clicks on a different element.

At first I had the following (This is using Angular2 but I suspect the only different is how the onclick event is handled):

        <span>
            <input type="text" id="bioName">
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

...but this didn't work. I then found an example that identified the input field differently, and this did work for me. It was as follows:

        <span>
            <input type="text" #bioName>
        </span>
        <span class="icon-pencil" (click)="editField(bioName);"></span>

Unfortunately I can't find anything that explains this. Searching for "hash" and "pound" with HTML and Javascript yield too many results that have nothing to do with this in the subject area.

So what does # do in this case? Can id not be used to obtain a reference to the DOM element when setting up an event handler? What is this called so I can google it and read the appropriate documentation?

Answer 1

This is Angular2 specific, regular HTML doesn't recognize this syntax, i.e. you have to use id="bioName" in order to access the tag with CSS/JavaScript.

Here is more information on how to use # in Angular2.