angular-cn/aio/content/guide/template-reference-variables.md

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.

Angular assigns each template reference variable a value based on where you declare the variable:

• If you declare the variable on a component, the variable refers to the component instance.
• If you declare the variable on a standard HTML tag, the variable refers to the element.
• If you declare the variable on an <ng-template> element, the variable refers to a TemplateRef instance, which represents the template.
• 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.

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.