Chapter 3.5☕ 14 min read

Template Reference Variables (#var)

Template reference variables let you name HTML elements and access them directly in your template.

01What is a Template Reference Variable

A template reference variable uses #myVar to give a name to an element, directive, or component in your template.

"Template reference = naam plate — element ko naam do, phir usse bulao."

Once named, you can access that element's properties and methods directly — without using $event or @ViewChild.

<input #phoneInput type="text">\n<button (click)="callPhone(phoneInput.value)">Call</button>

The #phoneInput refers to the HTMLInputElement. You can access .value, .placeholder, and any other native property.

02On DOM Elements

Template refs on DOM elements give you access to the native element:

<input #myInput placeholder="Enter name">\n\n<!-- Access properties directly -->\n<p>Placeholder: {{ myInput.placeholder }}</p>\n<button (click)="myInput.focus()">Focus Input</button>

This is much cleaner than using $event.target.value:

<!-- OLD: $event.target.value -->\n<input (input)="onTyping($event.target.value)">\n\n<!-- NEW: #ref.value -->\n<input #nameInput (keyup.enter)="addItem(nameInput.value)">

"Pehle $event.target.value likhna padta tha — ab #phoneInput.value bas."

03On ngModel / model

On ngModel directives, you can access validation state:

<input #name="ngModel" [(ngModel)]="name" required>\n\n<div *ngIf="name.invalid && name.touched">\n  Name is required!\n</div>

The #name="ngModel" references the NgModel directive, not the HTML element. This gives you access to:

.valid — Is input valid?
.invalid — Is input invalid?
.errors — What validation errors?
.touched — Has user clicked away?
.dirty — Has user changed value?

Essential for template-driven form validation.

04On Angular Directives

On ngForm directives, you can access the entire form state:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">\n  <input name="name" ngModel required>\n  <input name="email" ngModel email>\n  <button type="submit" [disabled]="myForm.invalid">Send</button>\n</form>

With the form reference, you get:

.value — All form values as an object
.valid — Is entire form valid?
.invalid — Is any field invalid?
.reset() — Reset form to initial state
.controls — Access individual controls

"Form ko naam do, phir uske saath khelo."

05On Custom Components

On custom components, you can access the component's public properties and methods:

<app-biryani #biryaniCard></app-biryani>\n\n<!-- Access child component's public API -->\n<button (click)="biryaniCard.order()">Order Now</button>\n<p>Price: {{ biryaniCard.price }}</p>

This is a simpler alternative to @ViewChild() for accessing child components directly in the template.

Note: The child component must have its properties/methods public. Private members are not accessible via template refs.

"Child component ko naam do, uski methods directly call karo — @ViewChild ki zarurat nahi."

Key Takeaways

✅ #var gives a name to any element or directive in the template.
✅ On DOM elements: #inputRef.value — access properties without $event.
✅ On ngModel: #name="ngModel" — access validation state (valid, errors, touched).
✅ On forms: #myForm="ngForm" — access entire form state and controls.
✅ On custom components: access public methods and properties directly.

Previous3.4 — Two-Way Binding 📋 All Chapters Next Chapter3.6 — Built-in Attributes →