Angular template reference variables
If you have been involved in the development of Angular projects, you may see at a glance who will be the protagonist of this article:
<input type="text" [value]="value" #name>
If you are unfamiliar with this, you don't need to care. There is a guy in the attributes of the <input> tag of the sample code that has a distinct style from other attributes - #name. This attribute named after a # and is attached to the DOM element is called template reference variables.
So what are template reference variables? The documentation describes it like this:
A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.
A template reference variable can be a reference to a DOM element, an Angular component (directive), or even a web component in an Angualr template, and what it specifically depends on the element it attaches to (when it does not use a directive to intervene). As in the previous example code, the template reference variable name is a reference to the DOM element <input>.
Since the template reference variable is a reference to an element in the template, we can naturally touch the "entity of the template element" through this reference variable. This is very practical in practical development, consider the following code:
<app-component #component [input]="variable"></app-component>
{{ }}
{{ () }}
By referencing variables to the template, we get an instance reference to the app-component component, which allows us to easily access members inside the app-component component in the template. In some situations, this ability provides a great help to our development.
Scope of template reference variables
You can refer to a template reference variable anywhere in the template.
In the documentation, the official unambiguously stated to us that template reference variables can be used anywhere in the template. The most sultry thing is that "anywhere" is also particularly bold. Most of the time, we don’t have any questions about this sentence, but maybe one day you will doubt whether this anywhere is true. There is a code like this:
<app-card>
<ng-template #body>
<app-component #component [input]="variable"></app-component>
</ng-template>
<ng-template #footer>
{{}}
</ng-template>
</app-card>
When the code runs, we will see an error message like this in the console:
TypeError: Cannot read property 'input' of undefined
Why is component undefined?
The answer is actually very obvious. The template reference object can be used anywhere in the template, but the definition and use of component in this example are not in the same template. The template described in the document cannot be directly equated with the component's template file. When we use ng-template, a new template will be created inside the current template, and its internals cannot be directly touched by the external template, so the example will naturally cause errors.
When the template is defined clearly, everything is so simple: the template reference variable has a scope, and its scope is the template it is in, not the template file it is in, and it can be used anywhere within its scope.
Finally, let's look at another example:
<div *ngIf="true">
<app-component #component [input]="variable"></app-component>
</div>
{{}}
When this code runs, we will still see in the console:
TypeError: Cannot read property 'input' of undefined
As for the reasons behind this, I will leave it to everyone as a small suspense and let everyone understand it for themselves. The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.