What is the use of Angular 2 hashtags in template ?

Angular2 hashtag is a syntax used to declare DOM element as variable and these templates render as an HTML file.

  • #: variable declaration
  • (): event binding
  • []: property binding
  • [()]: two-way property binding
  • {{}}: interpolation

Template reference variables are a little gem that allows getting a lot of nice things done with Angular. It relies on a simple hashtag to create a reference to an element in a template.

Syntex:

<input #searchBox keyword="search(searchBox.value)">

In above syntex, it creates reference to the input element that can be used later in the templates.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


<input type="text" #pv>
 {{ pv.value }}

In above example, pv refers to HTML element object instance for input. So, pv has all the properties and methods of HTML Elements. (id, name, etc.)

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai