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:
HTML
< div style = "text-align: center" > < h1 style = "color: green;" >w3wiki</ 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:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { changeTitle(inputElement) { inputElement.value = "w3wiki" ; 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:
Javascript
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:
HTML
< div style = "text-align: center" > < h1 style = "color:green" >w3wiki</ 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:
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'my-app' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], }) export class AppComponent { email_address = 'geek@geek.com' ; onSubmit(form) { this .email_address = form.value.email; } } |
app.module.ts:
Javascript
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:
Contact Us