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?
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 }}