What does Angular 2 hashtags in template mean?

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

Solution 2:

When you set this #searchBox, you can get this input on your Typescript like

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

EDIT

Adding some example: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Solution 3:

From angulartraining.com:

Template reference variables are a little gem that allows to get a lot of nice things done with Angular. I usually call that feature “the hashtag syntax” because, well, it relies on a simple hashtag to create a reference to an element in a template:

<input #phone placeholder="phone number">

What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Note that the scope for this variable is the entire HTML template in which the reference is defined.

Here’s how I could use that reference to get the value of the input, for instance:

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

Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.)

The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation.

---

Does this also work with components?

The answer is YES!

... the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising):

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Solution 4:

It creates a template variable that references

• the input element if the element is a plain DOM element
• the component or directive instance if it is an element with a component or directive
• some specific component or directive if it's used like #foo="bar" when bar is

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

Such a template variable can be referenced in template bindings or in element queries like

@ViewChild('searchBox') searchBox:HTMLInputElement;