Sign in
Skip to solution
easyFrontend

What are template reference variables?

632 views
01

Understand the problem

Explain #ref variables.

template-ref
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A template reference variable (#myInput) names an element, component, or directive in the template so you can reference it elsewhere in that template (e.g. myInput.value) or query it with @ViewChild('myInput').

Solution ready — 2 min read

Classified // press E to declassify

04

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; }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 4 of 121 decoded in the Angular track. One more won't hurt.

Back to track