Angular 2 Template Reference Variable Example

What Is a Template Reference Variable?
A template reference variable is a reference to a DOM element or directive within a template. Using template reference variable we access the values of DOM element properties.Template reference variable is declared using # and ref- as prefix, for example #myVar and ref-myVar and NgForm directive step by step using TypeScript.

  Template Reference Variable Syntax
We can use template reference variable by two ways. 
1. Using #
Find the example.

<input type="text" #myVar>  

Here myVar will be a template reference variable. 
2. Using ref- 
Find the example.

<input type="text" ref-myVar>  

Here myVar will be a template reference variable.

Template Reference Variable using Input Text Box

Here we will discuss template reference variable using input text box. Template reference variable is a variable using which we can access DOM properties. In our example we are using following DOM properties of input box. 

1. placeholder 
2. type 
3. value Now find the code snippet.

<input type="text" #mobile placeholder="Enter Mobile Number">  

In the above input text box #mobile is a template reference variable. To fetch DOM properties, we do as follows. 
mobile.placeholder : It will give placeholder of our text box if we have specified. 
mobile.value : It will give value of our text box. 
mobile.type : It will give type of input element. In our example type is text.

Template Reference Variable using Select Box

Here we will discuss template reference variable with select box.

<select #myColor (change) = "setData(myColor.value)">

</select>  

Look at the code snippet, #myColor is a template reference variable. The selected value of select box can be accessed by myColor.value .

Template Reference Variable with NgForm

Now we will discuss how to access NgForm directive using template reference variable. We are creating a sample form here.

<form (ngSubmit)="onSubmitPersonForm(myForm)" #myForm="ngForm">
    <input name="name" required [(ngModel)]="person.pname">
    <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>  

ngSubmit : It enables binding angular expressions to onsubmit event of the form. Here on form submit onSubmitPersonForm component method will be called. 
ngForm : It is the nestable alias of form directive 

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.