Es la sintaxis utilizada en el sistema de plantillas Angular 2 que declara los elementos DOM como variables.

Aquí le doy a mi componente una URL de plantilla:

 import {Component} from 'angular2/core'; @Component({ selector: 'harrys-app', templateUrl: 'components/harry/helloworld.component.html' }) export class HarrysApp {}

Las plantillas representan HTML. En una plantilla, puede usar datos, vinculación de propiedades y vinculación de eventos. Esto se logra con la siguiente sintaxis:

# - declaración de variables

() - vinculación de eventos

[] - enlace de propiedad

[()] - enlace de propiedad bidireccional

{{ }} - interpolación

* - directivas estructurales

La sintaxis # puede declarar nombres de variables locales que hacen referencia a objetos DOM en una plantilla. p.ej

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

Cuando configura este #searchBox, puede obtener esta entrada en su Typescript como

 @ViewChild('searchBox') searchBox; console.info(searchBox.nativeElement.value)

EDITAR

Agregando algún ejemplo: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Desde angulartraining.com :

Las variables de referencia de plantilla son una pequeña joya que permite hacer muchas cosas buenas con Angular. Por lo general, llamo a esa característica "la sintaxis del hashtag" porque, bueno, se basa en un simple hashtag para crear una referencia a un elemento en una plantilla:

 <input #phone placeholder="phone number">

Lo que hace la sintaxis anterior es bastante simple: crea una referencia al elemento de entrada que se puede usar más adelante en mi plantilla. Tenga en cuenta que el alcance de esta variable es la plantilla HTML completa en la que se define la referencia.

Así es como podría usar esa referencia para obtener el valor de la entrada, por ejemplo:

 <!-- phone refers to the input element --> <button (click)="callPhone(phone.value)">Call</button>

Tenga en cuenta que el teléfono se refiere a la instancia del objeto HTMLElement para la entrada . Como resultado, el teléfono tiene todas las propiedades y métodos de cualquier HTMLElement (id, nombre, HTML interno, valor, etc.)

Lo anterior es una buena manera de evitar el uso de ngModel o algún otro tipo de enlace de datos en una forma simple que no requiere mucho en términos de validación.

---

¿Esto también funciona con componentes?

¡La respuesta es sí!

... la mejor parte es que obtenemos una referencia a la instancia real del componente, HelloWorldComponent, por lo que podemos acceder a cualquier método o propiedad de ese componente (incluso si están declarados como privados o protegidos, lo cual es sorprendente) :

 @Component({ selector: 'app-hello', // ... export class HelloComponent { name = 'Angular'; }

[...]

 <app-hello #helloComp></app-hello> <!-- The following expression displays "Angular" --> {{helloComp.name}}