What is the meaning of # inside the input tag?

Question

I am going through an article of angular2 where they use <input type='text' #hobby> . With the help of #hobby they are extracting the value which are typing inside the textbox in place of taking ngModal. I am not getting that is #hobby means.

Answer 1

# , inside input, indicates that you are dealing with a local variable. Its an Angular2 way of defining a local variable in HTML. # will work behind the scene and updates your variable with relevant value.

<input type='text' #hobby>

Here hobby refers to a local variable as it is defined with # symbol. If you type in something in textbox, hobby variable will be updated immediately and you can access updated value by something.value syntax so hobby.value will give you updated value.

Answer 2

Try to add this to your template (html):

<button (click)="clicked(hobby)">Click</button>

This add to your component class:

clicked(a) {
  console.log(a);
}

You will see what that means.

Answer 3

See Template Syntax > Referencing a template reference variable .

The hash (#) prefix to "[hobby]" means that we're defining a [hobby] variable.

It is the same as using the ref-hobby attribute and allows you to access the content of the variable, for example in click handlers.

<input #hobby>
<button (click)="something(hobby.value)">Do Something</button>