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.
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.)
Last Updated :
21 Nov, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...