Skip to content
Related Articles

Related Articles

What is the use of Angular 2 hashtags in template ?

Improve Article
Save Article
Like Article
  • Last Updated : 21 Nov, 2021

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.
Syntax: 

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

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

javascript




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 {}
<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
Recommended Articles
Page :

Start Your Coding Journey Now!