Template Reference Variable in AngularJS

Template Reference Variable in angular is used to access all the properties of any element inside the DOM. It can also be a reference to an Angular component or directive or web component. Template Reference Variable can refer to the following:

• DOM element
• Directives
• Angular Component
• Web Component

Approach: 

• Create an Angular app to be used.
• Create the input element and add the template reference to this input field using the # tag.
• Bind this template reference inside the button click method "changeTitle()".
• Now, inside the changeTitle() method, we have full access to this input field and here we have set the input field value and focus properties.

Syntax: Use the # tag before the variable name. example - #geek:

<input #geek placeholder="" />

Example 1: This example illustrates the use of the Template Reference Variable by focusing on the input text box when clicking the button.

app.component.html:

<div style="text-align: center">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>AngularJS Template Reference Variable</h3>

    <input #geek placeholder="" />
    
    <!-- geek refers to the input element;
      pass it to an event handler -->
    <button (click)="changeTitle(geek)">
        Click Me
    </button>
</div>

In the above HTML template, we have created an input element with the template reference variable "email" and we have created a button. On button click, we access the complete input element and all its properties. 

"#geek" is template reference variable on input field

app.component.ts:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent {
    changeTitle(inputElement) {
        inputElement.value = "GeeksforGeeks";
        inputElement.focus();
    }
}

The template reference variable of the input element is accessible inside the changeTitle() function and on the button click, we are updating the input element value and also making this field focused.

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the template-driven forms, we are actually using the template reference variable to access the form data.

app.component.html:

<div style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>AngularJS Template Reference Variable</h3>

    <h4>{{ email_address }}</h4>
    <form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
        <input ngModel #email="ngModel" 
            type="email" placeholder="Email" name="email" />
        <button type="submit">Submit</button>
    </form>
</div>

So here we are accessing the form data using the template reference variable on the form element and on form submit we are displaying the input email provided through the form field.

app.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    email_address = '[email protected]';
    onSubmit(form) {
        this.email_address = form.value.email;
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent,
        bootstrap: [AppComponent],
})
export class AppModule { }

So the complete form fields are accessed using the "itemForm" template reference variable, and we are displaying the email address in the browser.

Output: