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 : https://github.com/Tariqu/angular_8/tree/angular%2312
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
https://youtu.be/kydPq4r2vbE
Angular 8 2020 | Angular Project Setup #2
https://youtu.be/zsb4vYFf1eI
Angular 8 2020 | Workspace vs File Structure of Angular #3
https://youtu.be/1ukJR6te398
Angular 8 2020 | Single Page Application vs Multi page Application #4
https://youtu.be/jA7Xvw1JNw4
Angular 8 2020 | Complete architecture Overview #5
https://youtu.be/lRTaT74OUic
Angular 8 2020 | What is Component in Angular Application #6
https://youtu.be/5BFeKxGyFdg
Angular 8 2020 | Interpolation #7
https://youtu.be/egNDI8nN8Og
Angular 8 2020 | Property binding #8
https://youtu.be/f9BNLAENCIs
Angular 8 - tutorial | Class Binding #9
https://youtu.be/MKkv9oHDHXQ
Angular 8 - tutorial | Style binding #10
https://youtu.be/_mrtaKmkxAY
Angular 8 - tutorial | event binding #11
https://youtu.be/K1m0HmHwrOI
#angular #angular 8
