Two-way binding with ngModel in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value to the component property using ngModel.

Angular

<input type="text" [(ngModel)]="[1]">

Drag options to blanks, or click blank then click option'

Avalue

Bdata

CinputValue

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using only [ngModel] or (ngModel) instead of [(ngModel)]

Binding to a property name that does not exist in the component

The [(ngModel)] directive binds the input's value to the component property username for two-way binding.

2fill in blank

medium

Complete the code to import the module needed for ngModel to work.

Angular

import { [1] } from '@angular/forms';

Drag options to blanks, or click blank then click option'

AFormsModule

BFormControlModule

CReactiveFormsModule

DNgModelModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ReactiveFormsModule instead of FormsModule

Forgetting to import any forms module

The FormsModule must be imported to use ngModel for two-way binding in Angular templates.

3fill in blank

hard

Fix the error in the code to correctly bind the input to the property 'email'.

Angular

<input type="email" [1]="email">

Drag options to blanks, or click blank then click option'

A[(ngModel)]

B[ngModel]

C(ngModel)

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using only [ngModel] or (ngModel) instead of [(ngModel)]

Missing the parentheses or brackets

Two-way binding requires the syntax [(ngModel)] to bind and listen for changes simultaneously.

4fill in blank

hard

Fill both blanks to create a two-way binding for the property 'age' in the input element.

Angular

<input type="number" [1]="[2]">

Drag options to blanks, or click blank then click option'

A[(ngModel)]

B[ngModel]

Cage

DuserAge

Attempts:

3 left

💡 Hint

Common Mistakes

Using [ngModel] instead of [(ngModel)] for two-way binding

Binding to a property name that does not exist

The input uses [(ngModel)] for two-way binding and binds to the component property age.

5fill in blank

hard

Fill all three blanks to bind the input to 'password', import the correct module, and add the module to imports array.

Angular

import { [1] } from '@angular/forms';

@NgModule({
  imports: [[2]],
})
export class AppModule {}

// In template:
<input type="password" [3]="password">

Drag options to blanks, or click blank then click option'

AFormsModule

C[(ngModel)]

DReactiveFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ReactiveFormsModule instead of FormsModule

Forgetting to add FormsModule to imports array

Using [ngModel] or (ngModel) instead of [(ngModel)]

To use ngModel for two-way binding, you must import FormsModule, add it to the imports array, and use [(ngModel)] in the template.

Practice

1. What does the [(ngModel)] directive do in Angular?

easy

A. It listens for click events on the input element.

B. It binds data only from the component to the template.

C. It binds data only from the template input to the component.

D. It creates two-way data binding between the component and the template input.

Solution

1. Step 1: Understand ngModel purpose

   The [(ngModel)] directive binds data both ways: from component to template and back.

2. Step 2: Compare options

   Only It creates two-way data binding between the component and the template input. describes two-way binding, while others describe one-way or unrelated behavior.

3. Final Answer:

   It creates two-way data binding between the component and the template input. -> Option D

4. Quick Check:

   Two-way binding = ngModel [OK]

Hint: Remember: [(ngModel)] means two-way binding [OK]

Common Mistakes:

• Confusing one-way binding with two-way binding
• Thinking ngModel only updates component or template
• Mixing ngModel with event binding

2. Which of the following is the correct syntax to bind an input's value to a component property username using ngModel?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall ngModel syntax

   The correct syntax for two-way binding uses square and round brackets together: [(ngModel)].

2. Step 2: Evaluate options

   uses [(ngModel)]="username", which is correct. Others use only one bracket or no brackets, which is invalid for two-way binding.

3. Final Answer:

   <input [(ngModel)]="username"> -> Option A

4. Quick Check:

   Two-way binding syntax = [(ngModel)] [OK]

Hint: Two-way binding always uses [( )] brackets [OK]

Common Mistakes:

• Using only [ngModel] or (ngModel) instead of [(ngModel)]
• Forgetting to add FormsModule import
• Writing ngModel without brackets

3. Given this component code:

export class AppComponent {
  name = 'Alice';
}

And this template snippet:

<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

What will be displayed if the user changes the input text to "Bob"?

medium

A. Hello, Alice!

B. Hello, {{name}}!

C. Hello, Bob!

D. No change, input is not bound

Solution

1. Step 1: Understand two-way binding effect

   The [(ngModel)]="name" binds input and component property name both ways, so changing input updates name.

2. Step 2: Predict displayed output

   When user types "Bob", name becomes "Bob", so {{name}} shows "Bob" in the paragraph.

3. Final Answer:

   Hello, Bob! -> Option C

4. Quick Check:

   Input change updates name = Hello, Bob! [OK]

Hint: Two-way binding updates both input and display instantly [OK]

Common Mistakes:

• Thinking interpolation {{name}} won't update
• Assuming input change doesn't affect component property
• Confusing one-way binding with two-way binding

4. What is the main error in this Angular template snippet?

<input (ngModel)="email">

medium

A. ngModel cannot be used on input elements

B. Missing square brackets for two-way binding syntax

C. FormsModule is not imported

D. Parentheses should be replaced with curly braces

Solution

1. Step 1: Identify ngModel syntax error

   The snippet uses only parentheses (event binding) instead of two-way binding syntax [(ngModel)].

2. Step 2: Check other options

   ngModel is valid on input, FormsModule import is not shown but not guaranteed error here, and curly braces are not used for binding syntax.

3. Final Answer:

   Missing square brackets for two-way binding syntax -> Option B

4. Quick Check:

   Two-way binding needs [( )] brackets [OK]

Hint: Two-way binding always uses [(ngModel)] [OK]

Common Mistakes:

• Using (ngModel) instead of [(ngModel)]
• Forgetting to import FormsModule
• Confusing event binding with two-way binding

5. 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?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand two-way binding on select

   Two-way binding requires [(ngModel)] syntax to sync the selected value with the component property.

2. 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.

3. Final Answer:

   Option A code snippet with [(ngModel)] on select -> Option A

4. Quick Check:

   Select two-way binding = [(ngModel)] [OK]

Hint: 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