What does #id in input tag mean?

Question

From this Angular.io tutorial, I show:

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

where I do not understand this: #searchBox. Can someone explain?

The hashtag reminds me of the jQuery selector for ids, but I am not quite sure what this means here, since we already have an id.

Answer 1

Template Reference Variable using Select Box

<select #myColor (change) = "setData(myColor.value)"></select> 

look at the code snippet, #myColor is a template reference variable. The selected value of select box can be accessed by myColor.value

Template Reference Variable with NgForm

how to access NgForm directive using template reference variable

<form (ngSubmit)="onSubmitPersonForm(myForm)" #myForm="ngForm">
    <input name="name" required [(ngModel)]="person.pname">
    <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>  

ngSubmit: It enables binding angular expressions to onsubmit event of the form. Here on form submit onSubmitPersonForm component method will be called.

ngForm: It is the nestable alias of form directive

Here we are using template reference variable for ngForm as #myForm="ngForm" . Now we can use myForm in place of ngForm such as to check form validity and we can also use it in our angular

Template Reference Variable using Input Text Box

Template reference variable is a variable using which we can access DOM properties. In our example, we are using following DOM properties of the input box.

<input type="text" #mobile placeholder="Enter Mobile Number">

In the above input text box, #mobile is a template reference variable. To fetch DOM properties, we do as follows.

mobile.placeholder: It will give placeholder of our text box if we have specified.

mobile.value: It will give the value of our text box.

mobile.type: It will give the type of input element. In our example type is text.

Answer 2

In simple words:

1. Its called a template reference variable (aka reference variable) since it is declared in template and often consumed in Javascript(typescript).

2. A template reference variable is similar to var id(but not identical) which can be used to refer pretty much any DOM element (HTML element, Directive, Component) in template.

3. Template Reference variable are also available in Reactjs.

4. In angular you can use #somename or ref-somename to declare a template reference variable.

So how do i use these TRV(Template Reference variable) that's when you should look into library documentation

Answer 3

That is a template reference variable. See more in details here: https://angular.io/guide/template-syntax#template-reference-variables-var

Answer 4

It is used as an element selector within a component...

component.html

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" value='4'/>

component.ts

@ViewChild('searchBox') input; 

ngAfterViewInit() {
  console.log(input.nativeElement); // logs the javascript object for the element.
  console.log(this.input.nativeElement.value); // logs 4
}

Answer 5

A template reference is used to give your controlling class a reference to an element. #searchBox will give you a reference to your input element if you define it in typescript like:

@ViewChild('searchBox') searchBox;

now you can use that reference to control or ask from your input element like:

this.searchBox.nativeElement.focus();