This blog represents tips and code sample for using Template reference variable for capturing user inputs in an Angular form.
Template code for Template Reference Variable
The following code represents the template file, app.component.html.
<div> <form> <div class="form-group"> <label for="emailField">Email address</label> <input type="email" class="form-control" id="emailField" #email (keyup)="setEmail(email.value)" placeholder="name@example.com"/> </div> </form> </div>
Component code for Template Reference Variable
The following represents the component code, app.component.ts:
import { Component } from '@angular/core'; @Component({ templateUrl: './app.component.html', }) export class AppComponent { uEmail = ''; setEmail(value: string) { this.uEmail = value; } }
In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.
Latest posts by Ajitesh Kumar (see all)
- Mathematics Topics for Machine Learning Beginners - July 6, 2025
- Questions to Ask When Thinking Like a Product Leader - July 3, 2025
- Three Approaches to Creating AI Agents: Code Examples - June 27, 2025
I found it very helpful. However the differences are not too understandable for me