[Solved] You want to bind a select dropdown to a component property selectedColor... Which code snippet correctly implements two-way binding and updates the property when the user changes the selection? | Angular

Angular - Templates and Data Binding

You want to bind a select dropdown to a component property selectedColor using ngModel. Which code snippet correctly implements two-way binding and updates the property when the user changes the selection?

A

<select [(ngModel)]="selectedColor">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

B

<select [ngModel]="selectedColor">
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

C

<select (ngModelChange)="selectedColor = $event">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

D

<select ngModel="selectedColor">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Step-by-Step Solution

Solution:

Step 1: Understand two-way binding on select
Two-way binding requires [(ngModel)] syntax to sync the selected value with the component property.
Step 2: Evaluate options
uses [(ngModel)]="selectedColor" with proper option values, enabling two-way binding. uses one-way binding only. uses event binding but misses the input binding part. uses invalid syntax without brackets.
Final Answer:
Option A code snippet with [(ngModel)] on select -> Option A
Quick Check:
Select two-way binding = [(ngModel)] [OK]

Quick Trick: Use [(ngModel)] on select for two-way binding [OK]

Common Mistakes:

Using only [ngModel] or (ngModelChange) without two-way binding
Missing value attributes on option tags
Writing ngModel without brackets

Master "Templates and Data Binding" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Which code snippet correctly implements two-way binding and updates the property when the user changes the selection?

Step 1: Understand two-way binding on select

Step 2: Evaluate options

Final Answer:

Quick Check:

Want More Practice?