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>
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? 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.
"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.
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
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With