I usually call that feature “the hashtag variable” because it relies on a simple hashtag to create a reference to an element in a template:

source code : [ Ссылка ]

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. Now 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! Assuming we have the following HelloWorldComponent:
@Component({
selector: 'app-hello',
template: `
div
h2 Hello {{name}} /h2
/div
`
})
export class HelloComponent {

name = 'Angular';
}
We can now get a reference to that component as follows, using the “hashtag syntax”:

app-hello #helloComp /app-hello
And 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):
app-hello #helloComp /app-hello !-- The following expression displays "Angular" --
{{helloComp.name}}
We can obviously use that syntax not only to read data from a component, but also to change it.
Does this also work with directives?
Of course, but there is something more to know about it. Most directives are used as attributes, which means we can’t really apply the “hashtag syntax” there, unless we use the same syntax with a twist:
form (ngSubmit)="onSubmit(myForm)" #myForm="ngForm"
In the above example, myForm is a reference to the ngForm directive applied to that form.
Now if you’re looking closely at the above HTML element, you’re probably thinking: “Wait a minute, there is no ngForm directive there! I don’t see any attribute called ngForm!” And you would be right to think so.
The answer lies in the ngForm directive source code:
@Directive({
selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
...
exportAs: 'ngForm'
})
See the selector for that directive? It applies to any form element that does not have a ngNoForm nor formGroup attribute. Because of that, my form element automatically gets the ngForm directive applied.
The second interesting thing to notice in that code is the exportAs property in the decorator. This tells Angular: “Hey, if someone wants to reference this directive with a template reference variable, the name for it is ngForm”.
Now we know how all of this works. We can create custom directives and expose them with any kind of name using exportAs.

Angular 8 2020 | Introduction to Angular
[ Ссылка ]
Angular 8 2020 | Angular Project Setup #2
[ Ссылка ]
Angular 8 2020 | Workspace vs File Structure of Angular #3
[ Ссылка ]
Angular 8 2020 | Single Page Application vs Multi page Application #4
[ Ссылка ]
Angular 8 2020 | Complete architecture Overview #5
[ Ссылка ]
Angular 8 2020 | What is Component in Angular Application #6
[ Ссылка ]
Angular 8 2020 | Interpolation #7
[ Ссылка ]
Angular 8 2020 | Property binding #8
[ Ссылка ]
Angular 8 - tutorial | Class Binding #9
[ Ссылка ]
Angular 8 - tutorial | Style binding #10
[ Ссылка ]
Angular 8 - tutorial | event binding #11
[ Ссылка ]

#angular #reference_variable

свернуть