3.4 KiB
Template reference variables (#var)
A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component.
See the for a working example containing the code snippets in this guide.
Use the hash symbol (#) to declare a reference variable.
The following reference variable, #phone, declares a phone variable on an <input> element.
You can refer to a template reference variable anywhere in the component's template.
Here, a <button> further down the template refers to the phone variable.
How a reference variable gets its value
In most cases, Angular sets the reference variable's value to the element on which it is declared.
In the previous example, phone refers to the phone number <input>.
The button's click handler passes the <input> value to the component's callPhone() method.
The NgForm directive can change that behavior and set the value to something else. In the following example, the template reference variable, itemForm, appears three times separated
by HTML.
The reference value of itemForm, without the ngForm attribute value, would be
the HTMLFormElement.
There is, however, a difference between a Component and a Directive in that a Component
will be referenced without specifying the attribute value, and a Directive will not
change the implicit reference (that is, the element).
However, 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.
The native <form> element doesn't have a form property, but the NgForm directive does, which allows disabling the submit button
if the itemForm.form.valid is invalid and passing the entire form control tree
to the parent component's onSubmit() method.
Template reference variable considerations
A template reference variable (#phone) is not the same as a template input variable (let phone) such as in an *ngFor.
See Structural directives for more information.
The scope of a reference variable is the entire template. So, don't define the same variable name more than once in the same template as the runtime value will be unpredictable.
Alternative syntax
You can use the ref- prefix alternative to #.
This example declares the fax variable as ref-fax instead of #fax.