Template Reference Variables(#var) in Angular

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

Template Reference Variables in Angular Component

That’s all for angular template ref variable.