[Solved] Given this template snippet:<input #myInput type="text"> <button (click)="myInput.focus()">Focus</button>What happens when the button is clicked? | Angular

Angular - Component Interaction

Given this template snippet:

<input #myInput type="text">
<button (click)="myInput.focus()">Focus</button>

What happens when the button is clicked?

ANothing happens because focus() is not a valid method

BAn error occurs because myInput is undefined

CThe input box receives keyboard focus

DThe button text changes to 'Focus'

Step-by-Step Solution

Solution:

Step 1: Understand the template reference usage
The #myInput references the input element, allowing direct access to its DOM methods.
Step 2: Analyze the click event
Click calls myInput.focus(), which sets keyboard focus on the input element.
Final Answer:
The input box receives keyboard focus -> Option C
Quick Check:
Template ref calls focus() = input focused [OK]

Quick Trick: Template refs access DOM methods like focus() [OK]

Common Mistakes:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this template snippet: