What does Angular 2 hashtags in template mean?

by

It’s syntax used in the Angular 2 templating system which declares DOM elements as variables.

Here I give my component a template URL:

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Templates render HTML. In a template you can use data, property binding and event binding. This is accomplished with the following syntax:

# – variable declaration

() – event binding

[] – property binding

[()] – two-way property binding

{{ }} – interpolation

* – structural directives

The # syntax can declare local variable names which references DOM objects in a template.
e.g.

 <span [hidden]="harry.value">*</span>
 <input type="text" #harry>
 {{ harry.value }}

More Related Contents:

  1. (change) vs (ngModelChange) in angular
  2. Highlight the search text – angular 2
  3. Scroll to element on click in Angular 4
  4. Angular 7 go offline?
  5. How to add number with variable name? [duplicate]
  6. typescript anonymous object with variable based label value
  7. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  8. How do I download a file with Angular2 or greater
  9. Angular 2: How to detect changes in an array? (@input property)
  10. Typescript Type ‘string’ is not assignable to type
  11. How to do the chain sequence in rxjs
  12. Angular 6: How to set response type as text while making http call
  13. using external JS libraries in my angular 2 project
  14. Is it a good practice using Observable with async/await?
  15. How to handle window scroll event in Angular 4?
  16. Prevent IE11 caching GET call in Angular 2
  17. Nested arrays in Angular 2 reactive forms?
  18. Angular: In which lifecycle hook is input data available to the Component
  19. Angular 2 Component @Input not working
  20. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  21. Angular 4 Filter Search Custom Pipe
  22. Angular 2 typescript invoke javascript function
  23. Whats the difference between using a class and interface?
  24. How to loop over object properties with ngFor in Angular
  25. Load JSON content from a local file with http.get() in Angular 2
  26. Converting an image to base64 in angular 2
  27. how to define index in angular material table
  28. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  29. Property ‘catch’ does not exist on type ‘Observable’
  30. binding data to angular checkbox

Leave a Comment