Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Template Reference Variable in AngularJS

  • Last Updated : 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!