What does #id in input tag mean?

Question

From this Angular.io tutorial, I show:

where I do not unde

Answer 1

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();

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

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 4

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

Answer 5

This is template reference variable they are usually declared #variable and can be used anywhere in the template.

In this particular scenario #searchBox is declare the variable which will store the value of whatever is entered in textbox.

Moreover you can also see the use of this template variable #searchBox in keyup function were it is used to read the value itself. In same way you can use this variable anywhere in your code.

Answer 6

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
}