How can you pass a template reference variable of an input element to a child component's input property?

hard📝 Application Q9 of 15

Angular - Templates and Data Binding

<child-comp inputElement="#inputRef"></child-comp>
<input #inputRef type="text">

<child-comp [inputElement]="inputRef"></child-comp>
<input #inputRef type="text">

<child-comp [inputElement]="#inputRef"></child-comp>
<input #inputRef type="text">

<child-comp [inputElement]="inputRef.value"></child-comp>
<input #inputRef type="text">

Step-by-Step Solution

Solution:

Step 1: Understand how to bind template refs to inputs
You bind the variable name directly without # inside property binding.
Step 2: Check which option uses correct binding syntax
<child-comp [inputElement]="inputRef"></child-comp> <input #inputRef type="text"> correctly passes inputRef as a reference to the child component.
Final Answer:
Pass template ref variable directly without # in property binding -> Option B
Quick Check:
Use [prop]="inputRef" to pass template refs [OK]

Quick Trick: Pass template refs without # in property bindings [OK]

Common Mistakes:

Master "Templates and Data Binding" 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