Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does Angular 2 hashtags in template mean?

People also ask

What does the hashtag mean in Angular?

Angular2 hashtag is a syntax used to declare DOM element as variable and these templates render as an HTML file. #: variable declaration.

What does mean Angular template?

An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality. When you generate an Angular application with the Angular CLI, the app.component.html file is the default template containing placeholder HTML.

What is a template in Angular 2?

template: ' <div> <h1>{{appTitle}}</h1> <div>To Tutorials Point</div> </div> ' This is known as an inline template. There are other ways to define a template and that can be done via the templateURL command. The simplest way to use this in the component is as follows.

What is hashtag in HTML?

The hashtag '#' is an id selector used to target a single specific element with a unique id, while a period '. ' is a class selector used to target multiple elements with a particular class.


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 }}

When you set this #searchBox, you can get this input on your Typescript like

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

EDIT

Adding some example: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview


From angulartraining.com:

Template reference variables are a little gem that allows to get a lot of nice things done with Angular. I usually call that feature “the hashtag syntax” because, well, it relies on a simple hashtag to create a reference to an element in a template:

<input #phone placeholder="phone number">

What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Note that the scope for this variable is the entire HTML template in which the reference is defined.

Here’s how I could use that reference to get the value of the input, for instance:

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.)

The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation.


Does this also work with components?

The answer is YES!

... the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising):

@Component({
  selector: 'app-hello',
  // ...

export class HelloComponent {
   name = 'Angular';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

It creates a template variable that references

  • the input element if the element is a plain DOM element
  • the component or directive instance if it is an element with a component or directive
  • some specific component or directive if it's used like #foo="bar" when bar is
@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

Such a template variable can be referenced in template bindings or in element queries like

@ViewChild('searchBox') searchBox:HTMLInputElement;