javascript - What does Angular 2 hashtags in template mean?

Question

I am working with angular 2 and I have found something like

<input #searchBox (keyup)="search(searchBox.value)"

and it works.

However, I don't understand the meaning of #searchBox. I haven't found anything clear neither in the doc.

Could anyone explain to me how it works?

Answer 1

It's syntax used in the Angular 2 templating system which declares DOM elements as variables.

Here I give my component a template URL:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Templates render HTML. In a template you can use data, property binding and event binding. This is accomplished with the following syntax:

# - variable declaration

() - event binding

[] - property binding

[()] - two-way property binding

{{ }} - interpolation

* - structural directives

The # syntax can declare local variable names which references DOM objects in a template. e.g.

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}