What does #id in input tag mean?

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


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


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

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
}