What is Template Reference Variable?
Using the Template Reference Variable you can get the direct access of properties and attributes of any of the input fields for example text, radio button, select box, checkbox etc. Its also called as Local Reference Variable.Its a very essential topic which you need always while developing the angular application.
Template Reference Variable can provide the reference of any DOM Element. Through which we can access the attribute and properties of any element. For example if you have one ts file and one html file. And in html file you have any input field and you want to access the value of that input field into ts file. Then you can use the template reference variable. It is denoted by #name. Here name can be anything which you will provide to that input field.
Template Reference Variable with Example
Lets create one ts and html file.
temp-ref-variable.component.html
<input type="text" #tempref> <button (click)="getValue(tempref);">Submit</button>
temp-ref-variable.component.ts
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getValue(val: any) {
console.log(val);
}
}
If we will run this , we see the below output in console.
In console you can see we got the reference of input box.
If we want to get the value of input box then we have to modify the ts file.
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getValue(val: any) {
console.log(val.value);
}
}
Output:
We can also get the type of input box by using below code.
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getValue(val: any) {
console.log(val.type);
}
}
Output: 
Similarly if we will add any other attribute in the input field , then we can get that one as well. For example lets add title in input box.
<input type="text" #tempref title="Template Reference"> <button (click)="getValue(tempref);">Submit</button>
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getValue(val: any) {
console.log(val.title);
}
}
Output: 
From the above all examples we can see, we can get all the references of input box. And we are achieving this by using #tempref . It gives access of all the reference of input element. Whatever attribute we want to access we can access using this.
How to get value of Checkbox using Template Reference Variable
temp-ref-variable.component.html
CheckBox: <input type="checkbox" #tempref title="Checkbox Reference"> <button (click)="getCheckBoxValue(tempref);">Submit</button>
temp-ref-variable.component.ts
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getCheckBoxValue(val: any) {
console.log(val);
}
}
Output: 
This is the reference for checkbox.
Now lets take the value of checkbox.
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getCheckBoxValue(val: any) {
console.log(val.value);
}
}
Output: 
If we have to check that checkbox is checked or not then we need to use the checked property.
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getCheckBoxValue(val: any) {
console.log(val.checked);
}
}
Output: 
After checking the checkbox , we get the another output.
How to get value of Radio Button using Template Reference Variable
temp-ref-variable.component.html
Radio Button: <br> <input type="radio" name="gender" value="male" #temprefmale >Male<br> <input type="radio" name="gender" value="female" #tempreffemale>Female<br> <button (click)="getRadioValue(temprefmale.checked ? temprefmale : tempreffemale);">Submit</button>
temp-ref-variable.component.ts
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getRadioValue(val: any) {
console.log(val.value);
}
}
Output:
If we will select the male radio button then output is below.
If we will select the female radio button then output is below.
How to get value of Select Dropdown using Template Reference Variable
temp-ref-variable.component.html
Select Dropdown: <br> <select #tools> <optionvalue="TV">TV</option> <optionvalue="Mobile">Mobile</option> <optionvalue="Camera">Camera</option> </select><br> <button (click)="getSelectValue(tools)">Submit</button>
temp-ref-variable.component.ts
import { Component } from '@angular/core';
@Component({
selector:'app-temp-ref-variable',
templateUrl:'./temp-ref-variable.component.html',
styleUrls: ['./temp-ref-variable.component.scss']
})
export class TempRefVariableComponent {
getSelectValue(val: any) {
console.log(val.value);
}
}
Output:
If we will select Mobile then –
If we will select the TV
If we will select the Camera
