Two-way binding with ngModel in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the input value changes in this Angular component?

Consider this Angular component using ngModel for two-way binding. What will be the value of username after the user types 'Alice' in the input box?

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-input',
  standalone: true,
  template: `
    <input [(ngModel)]="username" aria-label="Username input" />
    <p>Hello, {{ username }}!</p>
  `,
  imports: [FormsModule]
})
export class UserInputComponent {
  username = '';
}

A undefined - The username is not initialized

B 'Alice' - The username updates as the user types

C Error - ngModel requires FormsModule which is missing

D '' - The username remains empty because ngModel is one-way

💡 Hint

Think about what Angular module is needed to use ngModel in templates.

The ngModel directive requires importing FormsModule in the component or module. Without it, Angular throws an error because it doesn't recognize ngModel. So even though the code looks correct, it will cause a runtime error.

❓ state_output

intermediate

What is the value of email after typing '[e-mail]'?

Given this Angular component with two-way binding using ngModel, what will be the value of the email property after the user types '[e-mail]' in the input field?

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-input',
  standalone: true,
  template: `
    <input [(ngModel)]="email" aria-label="Email input" />
    <p>Your email is: {{ email }}</p>
  `,
  imports: [
    FormsModule
  ]
})
export class EmailInputComponent {
  email = '';
}

A Error - Two-way binding syntax is incorrect

B '' - The email property stays empty

C null - The email property is reset

D '[e-mail]' - The email property updates with input

💡 Hint

Remember how two-way binding updates the component property as the user types.

With [(ngModel)], the input value and the component property email stay in sync. When the user types '[e-mail]', the email property updates immediately to that string.

📝 Syntax

advanced

Which option correctly implements two-way binding with ngModel in Angular?

Select the code snippet that correctly binds the password property to an input field using Angular's two-way binding syntax.

A <input [(ngModel)]="password" />

B <input (ngModelChange)="password = $event" />

C <input [ngModel]="password" />

D <input [ngModel]="password" (ngModelChange)="password = $event" />

💡 Hint

Two-way binding uses a special syntax combining property and event binding.

The [(ngModel)]="password" is Angular's shorthand for binding the property and listening to changes. Option A separates these but is more verbose and less common. Option A is one-way binding only.

🔧 Debug

advanced

Why does this Angular component fail to update the name property?

This component uses ngModel for two-way binding, but typing in the input does not update the name property. What is the cause?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-name-input',
  standalone: true,
  template: `
    <input [(ngModel)]="name" aria-label="Name input" />
    <p>Name: {{ name }}</p>
  `,
  imports: []
})
export class NameInputComponent {
  name = 'John';
}

A FormsModule is not imported, so ngModel does not work

B The property name is misspelled in the template

C The input element is missing a closing tag

D The component is missing a constructor

💡 Hint

Check if the necessary Angular module for ngModel is included.

Without importing FormsModule, Angular does not recognize ngModel, so the binding does not work and the property does not update.

🧠 Conceptual

expert

How does Angular's two-way binding with ngModel work under the hood?

Which statement best describes how Angular implements two-way binding with ngModel?

A It relies on Angular's change detection to poll input values every second

B It uses a special Angular service that syncs all component properties automatically

C It combines property binding to set the input value and event binding to update the component property on user input

D It uses direct DOM manipulation to update the component property without Angular's template syntax

💡 Hint

Think about how Angular listens and updates values in templates.

Angular's two-way binding with [(ngModel)] is syntactic sugar for combining property binding [ngModel] and event binding (ngModelChange). This keeps the input and component property in sync.

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