Template reference for direct access in Angular - Mini Project: Build & Apply

Template Reference for Direct Access in Angular

📖 Scenario: You are building a simple Angular component that includes an input box and a button. You want to access the input box's value directly in the template when the button is clicked, without using two-way binding or component properties.

🎯 Goal: Create an Angular standalone component that uses a template reference variable to access the input element's value directly in the template and display it below the button when clicked.

📋 What You'll Learn

Create an input element with a template reference variable named userInput

Create a button that, when clicked, displays the current value of the input element

Use Angular's template reference variable syntax to access the input value directly in the template

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

Use standalone component syntax with Angular 17+ features

💡 Why This Matters

🌍 Real World

Template reference variables let you quickly access DOM elements in Angular templates without extra code in the component class. This is useful for simple forms, quick value reads, or focusing elements.

💼 Career

Understanding template references is important for Angular developers to write clean, efficient templates and handle user input directly. It is a common skill needed in frontend development roles using Angular.

1

Create the input element with a template reference variable

Create an input element of type text with a template reference variable named userInput inside the component's template.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    
  `
})
export class AppComponent {
}

Need a hint?

Use #userInput to create a template reference variable on the input element.

2

Add a button to trigger displaying the input value

Add a button element with the text Show Value below the input. The button should have a click event that sets a component property displayValue to the current value of the input accessed via the template reference variable userInput.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    Show Value
    
  `
})
export class AppComponent {
  displayValue = '';
}

Need a hint?

Use (click)="displayValue = userInput.value" on the button and declare displayValue as a string property in the component class.

3

Display the input value below the button

Add a <p> tag below the button that displays the value of the component property displayValue using Angular interpolation.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    Show Value
    {{ displayValue }}
    
  `
})
export class AppComponent {
  displayValue = '';
}

Need a hint?

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

4

Add accessibility and finalize the component

Add an aria-label attribute with the value Enter text to the input element for accessibility. Ensure the component is standalone and properly structured.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    Show Value
    {{ displayValue }}
    
  `
})
export class AppComponent {
  displayValue = '';
}

Need a hint?

Add aria-label="Enter text" to the input element for screen readers.