Template Reference Variable in AngularJS - GeeksforGeeks

04 Jun, 2021
Template Reference Variable in angular is used to access all the properties of any element inside DOM. It can also be a reference to an Angular component or directive or a 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 # 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 # tag before variable name. example – #geek
<input #geek placeholder="" />
 
Example 1:
app.component.html
<input #geek placeholder="" /><!-- geek refers to the input element;      pass it to an event handler --><button (click)="changeTitle(geek)">Click Me</button>
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: 'app-root',  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 make this field focussed.
Output:
Example 2: In the template-driven forms, we are actually using the template reference variable to access the form data.
app.component.html
<h1>{{email_address}}</h1><form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">    <input ngModel #email="ngModel" type="email"         placeholder="Email" name="email" />         <button type="submit">Submit</button></form>
So here we are accessing the form data using 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: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  email_address = 'geek@geek.com';  onSubmit(form){    this.email_address = form.value.email;  }}
So the complete form fields are accessed using the “itemForm” template reference variable, and we are displaying the email address in the browser.
Output:
AngularJS-Questions
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
Angular 10 (focus) Event
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?