What is #auto attribute here and why it is required

I am trying to learn angular material 2 and came across this #auto attribute in autocomplete.I understand auto can be replaced with any text, but why there need a # here before auto and what is there any name of this attribute?

  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">

<md-autocomplete #auto="mdAutocomplete">
               ^^^^ what is name of this property
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}



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:

  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

  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.

  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:

  exportAs: 'mdAutocomplete'
export class MdAutocomplete {

Since in your template you have


Then #auto variable will refer to instance of MdAutocomplete component. This reference is used in MdAutocompleteTrigger 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>


  • 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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.