Open In App

What is the use of Angular 2 hashtags in template ?

Last Updated : 21 Nov, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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.)
 


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads