easyFrontend

What are template reference variables?

Q: What are template reference variables?

**Core concept.** A template reference variable — declared with #name in the template — gives you a handle to a **DOM element**, a **component**, or a **directive** within that same template. You can then read its properties or call its methods elsewhere in the template. <input #box> declares #box <text class='d-te

631 views

Understand the problem

Explain #ref variables.

template-ref

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Read an input value via a template ref

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <input #box placeholder="type something" />
    <button (click)="show(box.value)">Show value</button>
    <p>{{ message }}</p>
  `,
})
export class AppComponent {
  message = '';
  show(value: string) { this.message = 'You typed: ' + value; }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain the difference between FormGroup.patchValue() and FormGroup.setValue().

How do you configure dynamic base href in Angular builds for different environments?