Template reference variables in Angular - Mini Project: Build & Apply

Using Template Reference Variables in Angular

📖 Scenario: You are building a simple Angular form where users can enter their name. You want to access the input value directly in the template without using component class properties.

🎯 Goal: Create an Angular component that uses a template reference variable to read the user's input value and display it below the input field in real-time.

📋 What You'll Learn

Create an input element with a template reference variable named nameInput.

Add a button that, when clicked, shows the current value of the input using the template reference variable.

Display the input value in a <p> tag below the button.

Use Angular's template syntax to bind the input value without using component class properties.

💡 Why This Matters

🌍 Real World

Template reference variables let you quickly access DOM elements and their properties in Angular templates, useful for simple forms and UI interactions without extra component code.

💼 Career

Understanding template reference variables is essential for Angular developers to write clean, efficient templates and improve user experience with direct DOM access.

1

Create the input element with a template reference variable

In the component's template, create an <input> element with a template reference variable named nameInput.

Angular

Need a hint?

Use #nameInput inside the <input> tag to create the template reference variable.

2

Add a button to trigger showing the input value

Below the input, add a <button> element with a click event that sets a template variable showName to the current value of nameInput. Use (click)="showName = nameInput.value".

Angular

Need a hint?

Use Angular's event binding syntax (click)="showName = nameInput.value" on the button.

3

Display the input value using interpolation

Add a <p> tag below the button that displays the value of the template variable showName using Angular interpolation syntax {{ showName }}.

Angular

  
  Show Name
   tag to display {{ showName }} -->
  

Need a hint?

Use {{ showName }} inside the <p> tag to show the value.

4

Add accessibility and finalize the template

Add an aria-label attribute to the <input> element with the value Enter your name for accessibility. Also, wrap the content inside a semantic <main> tag.

Angular

  
    
    Show Name
    Your name is: {{ showName }}
  
  

Need a hint?

Use aria-label="Enter your name" on the input and wrap everything in <main> tags.