[Solved] Consider this template code:<input #userInput type="text"> <button (click)="logValue()">Log</button>And component code:logValue() { console.log(userInput.value); }What is the problem here? | Angular

Angular - Templates and Data Binding

Consider this template code:

<input #userInput type="text">
<button (click)="logValue()">Log</button>

And component code:

logValue() {
  console.log(userInput.value);
}

What is the problem here?

AThe template reference variable should be declared with $ sign

BuserInput is not defined in the component class, causing an error

ClogValue() should be an arrow function

DThere is no problem; it works fine

Step-by-Step Solution

Solution:

Step 1: Identify scope of template reference variables
Template reference variables exist only in the template, not in the component class.
Step 2: Check component method usage
The method tries to access userInput directly, which is undefined in the class, causing an error.
Final Answer:
userInput is not defined in the component class, causing an error -> Option B
Quick Check:
Template refs not accessible in class directly [OK]

Quick Trick: Template refs only work inside template, not class methods [OK]

Common Mistakes:

Master "Templates and Data Binding" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Consider this template code: