What Does Angular 2 Hashtags in Template Mean

What does the syntax #foo=myFoo in template mean?

Using # you can create a reference so you can call from other places in your component.
As the documentation says:

A template reference variable is often a reference to a DOM element
within a template. It can also refer to a directive (which contains a
component), an element, TemplateRef, or a web component

Angular assigns each template reference variable a value based on where you declare the variable:

• If you declare the variable on a component, the variable refers to the component instance.
• If you declare the variable on a standard HTML tag, the variable refers to the element.
• If you declare the variable on an element, the variable refers to a TemplateRef instance, which represents the template.
• If the variable specifies a name on the right-hand side, such as #var="ngModel", the variable refers to the directive or component on the element with a matching exportAs name.

You can read more here: template-reference-variables | angular.io

What is the difference between parentheses, brackets and asterisks in Angular2?

All details can be found here: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName - is the short hand form for structural directives where the long form can only be applied to <template> tags. The short form implicitely wraps the element where it's applied in a <template>.

• [prop]="value" is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element).
  
  There are special forms:

  • [class.className] binds to a css class to enable/disable it
  • [style.stylePropertyName] binds to a style property
  • [style.stylePropertyName.px] binds to a style property with a preset unit
  • [attr.attrName] binds a value to an attribute (visible in the DOM, while properties are not visible)
  • [role.roleName] binds to the ARIA role attribute (not yet available)

• prop="{{value}}" binds a value to a property. The value is stringified (aka interpolation)

• (event)="expr" binds an event handler to an @Output() or DOM event

• #var or #var has different functions depending on the context

  • In an *ngFor="#x in y;#i=index" scope variables for the iteration are created
    (In beta.17 this is changed to *ngFor="let x in y; let i=index"`)
  • On a DOM element <div #mydiv> a reference to the element
  • On an Angular component a reference to the component
  • On an element that is an Angular component or has an Angular directive where exportAs:"ngForm" is defined, #myVar="ngForm" creates a reference to this component or directive.

What does #id in input tag mean?

That is a template reference variable.
See more in details here: https://angular.io/guide/template-syntax#template-reference-variables-var

What is #auto attribute here and why it is required

It is a template reference variable that allows us to get reference to html element or something else if we declare directive on this element.

We can declare template reference variable via (1)

• #var
• ref-var

#Default behavior

In most cases, Angular sets the reference variable's value to the html element on which it was declared (2) .

<div #divElem></div>
<input #inputEl>
<table #tableEl></table>
<form #formEl></form>

In the preceding all template reference variables will refer to the corresponding elements.

#divElem     HTMLDivElement
#inputEl     HTMLInputElement
#tableEl     HTMLTableElement
#formEl      HTMLFormElement

---

#Directives can change default behavior

But a directive can change that behavior and set the value to something else, such as itself.

Angular assigns references with empty value to component (3)

If we have component like:

@Component({
  selector: '[comp]',
  ...
})
export class SomeComponent {}

and template as:

<div comp #someComp></div>

then #someComp variable will refer to component itself (SomeComponent instance).

Angular doesn't locate directives in references with empty value (4)

If we change @Component decorator to @Directive

@Directive({
  selector: '[comp]',
  ...
})
export class SomeDirective {}

then #someComp variable will refer to HTMLDivElement.

How we can get SomeDirective instance in this case?

Fortunately, Template reference variable can have value (5)

• #var="exportAsValue"

• ref-var="exportAsValue"

We can define exportAs property within @Component/@Directive decorator (6):

exportAs is a name under which the component instance is exported in a
template. Can be given a single name or a comma-delimited list of
names.

@Directive({
  selector: '[comp]',
  exportAs: 'someDir',
  ...
})
export class SomeDirective {}

and then use exportAs value as value for template reference variable within template (7):

<div comp #someComp="someDir"></div>

After that #someComp will refer to our directive.

Now let's imagine we have several directives applied to this component. And we want to get specific directive instance.exportAs property is a good choice to solve this problem.

---

Let's go back to your code

If you open source code of MdAutocomplete component you can see:

@Component({
  ...
  exportAs: 'mdAutocomplete'
})
export class MdAutocomplete {
  ...

Since in your template you have

#auto="mdAutocomplete"

Then #auto variable will refer to instance of MdAutocomplete component. This reference is used in MdAutocompleteTrigger directive:

@Directive({
  selector: 'input[mdAutocomplete], input[matAutocomplete],' +
            'textarea[mdAutocomplete], textarea[matAutocomplete]',
  ...
})
export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
  @Input('mdAutocomplete') autocomplete: MdAutocomplete;

because you're passing auto variable to input within template

<input mdInput placeholder="State" [mdAutocomplete]="auto"

We can omit value and use only variable name in this case like

<md-autocomplete #auto>

but

• assignment value to value of exportAs property precisely indicates us where to get the instance.

• if md-autocomplete is a directive then auto variable will refer to HTMLElement.

So prefer specifying value for template reference variable if you doubt what it will refer to.

what's the meaning of * in the *ngFor?

When we reviewed the NgFor and NgIf built-in directives, we called out
an oddity of the syntax: the asterisk (*) that appears before the
directive name.

The * is a bit of syntactic sugar that makes it easier to read and
write directives that modify HTML layout with the help of templates.
NgFor, NgIf, and NgSwitch all add and remove element subtrees that are
wrapped in tags.

Meaning

ngFor can only be applied to a <template> elment.

*ngFor can be applied to any element. When used the <template> element is created behind the scene.

Is #myId the same as id=myId in HTML?

The #noServer is what's called a template variable. It's not the same as an id attribute. It allows Angular to reference the element it's placed on, either from within the template:

<div *ngIf="myCondition; else otherDiv"></div>
<div #otherDiv>

Or from TypeScript using @ViewChild, for example:

@ViewChild('otherDiv') otherDiv: ElementRef

For more information, see Angular docs https://angular.io/guide/template-reference-variables

---

Related Topics