What is the correct way to access the value of an input element with template reference #userInput inside a button click event?

easy📝 Syntax Q3 of 15

Angular - Component Interaction

What is the correct way to access the value of an input element with template reference #userInput inside a button click event?

A<button (click)="onClick(userInput.value)">Submit</button>

B<button (click)="onClick(#userInput.value)">Submit</button>

C<button (click)="onClick(userInput)">Submit</button>

D<button (click)="onClick(userInput.getValue())">Submit</button>

Step-by-Step Solution

Solution:

Step 1: Understand template reference usage in event binding
Template references can be used directly in event bindings without the # symbol.
Step 2: Access the input's value property
To get the input's text, use userInput.value inside the event handler call.
Final Answer:
<button (click)="onClick(userInput.value)">Submit</button> -> Option A
Quick Check:
Access input value with userInput.value [OK]

Quick Trick: Use variable name without # inside event bindings [OK]

Common Mistakes:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More Angular Quizzes