What is the use of Angular 2 hashtags in template ?
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.)
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...