You want to create a form with an input and a button that clears the input when clicked. Using a template reference #inputRef, which template code correctly implements this behavior?
hard📝 Application Q15 of 15
Angular - Component Interaction
You want to create a form with an input and a button that clears the input when clicked. Using a template reference #inputRef, which template code correctly implements this behavior?
Step 1: Understand how to clear input value via template reference
Directly setting inputRef.value = '' clears the input content.
Step 2: Check other options for correctness
Options B, C, and D call undefined or non-existent methods: clear() is undefined in the component, and clear() and reset() are not methods on input elements.
Final Answer:
<input #inputRef type="text">
<button (click)="inputRef.value = ''">Clear</button> -> Option A
Quick Check:
Set inputRef.value to empty string to clear [OK]
Quick Trick:Set inputRef.value = '' to clear input [OK]
Common Mistakes:
Calling non-existent methods like clear() or reset() on input
Trying to call component methods without passing template ref
Confusing template ref usage with reactive forms
Master "Component Interaction" in Angular
9 interactive learning modes - each teaches the same concept differently
