In this article, We will see what is angular template reference variable and how can we use or define the template reference variable in angular application.
Table of Contents
What is Angular Template Reference Variable
According to angular.io official docs:
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.
It’s just a reference to a DOM element within which it’s defined.
The scope of template ref variable is an entire template, so you can use that template ref variable anywhere in the template file and make sure you don’t define the same ref variable names more than once in the same template as runtime value will be unpredictable.
Also, keep in mind that if you use ng-template
or structural directives like *ngIf
or *ngFor
it creates a new template scope. so the ref variable declared inside it won’t be accessible outside of it.
How to use Angular Template Reference Variable in HTML Element
You can declare angular template ref variable using hash symbol(#).
For example, you can define the template ref variable for name input as #name
and you can use name
variable anywhere in the template file as following:
<input type="text" placeholder="Enter your name" #name="">
Here, you can see in the above code sample, we’ve defined template ref variable #name
which declare name
variable on input
element.
Here name
refers to HTMLInputElement
. so name exposes all the properties of HTMLInputElement
. So you can access id, name, type, value, innerText, innerHTML and etc.
You can refer to the template ref variable anywhere in the template, in the code below button
refers to name
template ref variable.
<button (click)="save(name.value)"> Save </button>
And we can use the name input value in the component by the following code. Here I’ve just log it in the console for demonstration purpose.
import {Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
save(value: string){
console.log(value);
}
}
How to use Angular Template Reference Variable in Directive
Using Angular Template Ref Variable with Custom directive
If you’re using your custom directive, then you can use exportAs
property. exportAs
property defines the name that can be used in the template to assign the directive to a template ref variable.
You can apply exportAs
property to Directive
metadata as following:
import { Directive } from '@angular/core';
@Directive({
selector: '[appMyDirective]',
exportAs: "myDirective"
})
export class MyDirectiveDirective {
name: string = "This is my test directive";
constructor() { }
}
and in your template file you can access it as follows:
<div appmydirective="" #test="myDirective">
{{ test.name }}
</div>
Using Angular Template Ref Variable with ngForm directive
ngForm
directive is exported from FormsModule
. As soon as you import FormsModule
in you application module, ngForm directive becomes active by default in all of the <form> tags. so we don’t need to specify special selector for it as we have specified in the above example as appMyDirective
.
ngForm
directive creates a top-level FormGroup
instance and binds it to a form to track aggregate form value and validation status.
<form (ngsubmit)="onSubmit(myForm)" #myform="ngForm">
</form>
So here we’re exporting directive to local template ref variable myForm
. Now you can access the value of the form control or validity status of the form as well as user interaction properties like dirty
and touched
using the template ref variable myForm
.
How to use Angular Template Reference Variable in Component
Now we’ll create test component to understand how template ref variable can be used in component.
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
name: string = "Test Component";
constructor() { }
ngOnInit(): void {
}
logComponentName() {
console.log('Test Component');
}
private privateLogMethod() {
console.log('Private Test Component');
}
}
Now we’ll use this component in app.component.html
<app-test #testcomp=""></app-test>
{{ testComp.name }}
<button (click)="testComp.logComponentName()">Log Component Name Call</button>
<br>
<button (click)="testComp.privateLogMethod()">Private Log Method Call</button>
Here we’ve create template ref variable testComp
for app-test
component as you can see in the above code.
Now we can get an instance of TestComponent
component using testComp
ref variable. so. we can access the properties and methods of that component. We can also access the private methods as well as you can see in the above code.
We’ve displayed name
property using interpolation and then we have two buttons.
The first button is calling the public method logComponentName
of test component and will log the message.
Second button will call the private method privateLogMethod
of test component and which will also log the message.
Here’s the output of above code, I’ve clicked on both buttons.
Output

That’s all for angular template ref variable.
Also Read :