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.
In simple words:
Its called a template reference variable (aka reference variable) since it is declared in template and often consumed in Javascript(typescript).
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.
Template Reference variable are also available in Reactjs.
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
That is a template reference variable. See more in details here: https://angular.io/guide/template-syntax#template-reference-variables-var
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
}
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();
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.
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.
