Template variables help you use data from one part of a template in another part of the template.\nWith template variables, you can perform tasks such as respond to user input or finely tune your application's forms.
\nA template variable can refer to the following:
\nSee the
In the template, you use the hash symbol, #, to declare a template variable.\nThe following template variable, #phone, declares a phone variable on an <input> element.
You can refer to a template variable anywhere in the component's template.\nHere, a <button> further down the template refers to the phone variable.
Angular assigns a template variable a value based on where you declare the variable:
\n<ng-template> element, the variable refers to a TemplateRef instance, which represents the template.\nFor more information on <ng-template>, see How Angular uses the asterisk, *, syntax in Structural directives.If the variable specifies a name on the right-hand side, such as #var=\"ngModel\", the variable refers to the directive or component on the element with a matching exportAs name.
NgForm with template variableslinkIn most cases, Angular sets the template variable's value to the element on which it occurs.\nIn the previous example, phone refers to the phone number <input>.\nThe button's click handler passes the <input> value to the component's callPhone() method.
The NgForm directive demonstrates getting a reference to a different value by reference a directive's exportAs name.\nIn the following example, the template variable, itemForm, appears three times separated by HTML.
Without the ngForm attribute value, the reference value of itemForm would be\nthe HTMLFormElement, <form>.\nThere is, however, a difference between a Component and a Directive in that Angular references a Component without specifying the attribute value, and a Directive does not change the implicit reference, or the element.
With NgForm, itemForm is a reference to the NgForm directive with the ability to track the value and validity of every control in the form.
Unlike the native <form> element, the NgForm directive has a form property.\nThe NgForm form property allows you to disable the submit button if the itemForm.form.valid is invalid.
You can refer to a template variable anywhere within its surrounding template.\nStructural directives, such as *ngIf and *ngFor, or <ng-template> act as a template boundary.\nYou cannot access template variables outside of these boundaries.
Define a variable only once in the template so the runtime value remains predictable.
\nAn inner template can access template variables that the outer template defines.
\nIn the following example, changing the text in the <input> changes the value in the <span> because Angular immediately updates changes through the template variable, ref1.
In this case, there is an implied <ng-template> around the <span> and the definition of the variable is outside of it.\nAccessing a template variable from the parent template works because the child template inherits the context from the parent template.
Rewriting the above code in a more verbose form explicitly shows the <ng-template>.
However, accessing a template variable from outside the parent template doesn't work.
\nThe verbose form shows that ref2 is outside the parent template.
Consider the following example that uses *ngFor.
Here, ref.value doesn't work.\nThe structural directive, *ngFor instantiates the template twice because *ngFor iterates over the two items in the array.\nIt is impossible to define what the ref.value reference signifies.
With structural directives, such as *ngFor or *ngIf, there is no way for Angular to know if a template is ever instantiated.
As a result, Angular isn't able to access the value and returns an error.
\n<ng-template>linkWhen you declare the variable on an <ng-template>, the variable refers to a TemplateRef instance, which represents the template.
In this example, clicking the button calls the log() function, which outputs the value of #ref3 to the console.\nBecause the #ref variable is on an <ng-template>, the value is TemplateRef.
The following is the expanded browser console output of the TemplateRef() function with the name of TemplateRef.
A template input variable is a variable you can reference within a single instance of the template.\nYou declare a template input variable using the let keyword as in let hero.
There are several such variables in this example: hero, i, and odd.
The variable's scope is limited to a single instance of the repeated template.\nYou can use the same variable name again in the definition of other structural directives.
\nIn contrast, you declare a template variable by prefixing the variable name with #, as in #var.\nA template variable refers to its attached element, component, or directive.
Template input variables and template variables names have their own namespaces.\nThe template input variable hero in let hero is distinct from the template variable hero in #hero.