Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
               ^^^^ what is name of this property
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>
like image 820
brk Avatar asked Jul 22 '17 03:07

brk


People also ask

Who is in love what is twice?

Nayeon is Mia from The Princess Diaries, Jeongyeon and Sana are Molly and Sam from Ghost, Mina and Dahyun are Vic and Matthieu from La Boum, Sana and Tzuyu are Mia and Vincent from Pulp Fiction, Jeongyeon and Tzuyu are Romeo and Juliet from Romeo + Juliet, Jihyo and Jeongyeon are Itsuki/Hiroko and male Itsuki from Love ...

What Is Love twice Wiki?

What Is Love? is the fifth extended play by South Korean girl group Twice. It was released on April 9, 2018, by JYP Entertainment and is distributed by Iriver. It includes the title track of the same name produced by Park Jin-young.

What is Live Twice?

"Live Twice" is the title track and the second single from Scottish singer Darius's second album, Live Twice (2004). The song was released on 10 January 2005 as his sixth and final single. It peaked at number seven on the UK Singles Chart and number 24 in Ireland.


1 Answers

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.

like image 160
yurzui Avatar answered Nov 14 '22 04:11

yurzui