Two-way binding in forms in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you update the input field in this Angular component?

Consider this Angular standalone component using two-way binding with [(ngModel)]. What will be the value of name after typing 'Anna' in the input?

Angular

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

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

A The <code>name</code> property never updates because <code>ngModel</code> is missing a form control.

B The <code>name</code> property updates only after the input loses focus.

C The <code>name</code> property updates but the template does not reflect the change.

D The <code>name</code> property updates to 'Anna' immediately as you type.

💡 Hint

Think about how [(ngModel)] works in Angular forms for two-way binding.

The [(ngModel)] directive binds the input's value to the name property and updates it immediately as the user types. This is classic two-way binding behavior.

📝 Syntax

intermediate

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

Choose the correct syntax for two-way binding an input field to a component property email.

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

B <input [ngModel]="email" (ngModelChange)="email = $event" />

C <input [ngModel]="email" (change)="email = $event.target.value" />

D <input (ngModelChange)="email = $event" />

💡 Hint

Remember the Angular syntax for two-way binding uses square brackets and parentheses together.

The syntax [(ngModel)]="email" is Angular's shorthand for binding the input value and listening for changes, enabling two-way binding.

🔧 Debug

advanced

Why does this Angular form input not update the component property?

Given this component code, why does typing in the input not update username?

Angular

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

@Component({
  selector: 'app-user',
  template: `<input [(ngModel)]="username" />`,
  standalone: true
})
export class UserComponent {
  username = '';
}

A The <code>[(ngModel)]</code> syntax is incorrect and should be <code>[ngModel]</code> only.

B The input element is missing a <code>name</code> attribute.

C The component is missing the import of <code>FormsModule</code> in its imports array.

D The <code>username</code> property is not initialized.

💡 Hint

Check if the necessary Angular module for forms is included.

Angular requires FormsModule to be imported for ngModel to work. Without it, two-way binding won't function.

❓ state_output

advanced

What is the value of user.age after this sequence of events?

In this Angular component, the input is bound with two-way binding to user.age. Initially, user.age is 30. The user types '35' in the input. What is the final value of user.age?

Angular

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

@Component({
  selector: 'app-age-input',
  standalone: true,
  imports: [FormsModule],
  template: `<input type="number" [(ngModel)]="user.age" aria-label="Age input" />`
})
export class AgeInputComponent {
  user = { age: 30 };
}

A The value of <code>user.age</code> is the string '35'.

B The value of <code>user.age</code> becomes NaN due to type mismatch.

C The value of <code>user.age</code> remains 30 because inputs always return strings.

D The value of <code>user.age</code> is the number 35.

💡 Hint

Remember how HTML input elements handle values and how Angular binds them.

HTML input elements always return string values. Angular's ngModel binds the string '35' to user.age, so it becomes a string, not a number.

🧠 Conceptual

expert

Which statement best describes Angular's two-way binding with [(ngModel)]?

Choose the most accurate explanation of how Angular's [(ngModel)] works behind the scenes.

A <code>[(ngModel)]</code> only binds the input value to the component property but does not listen for changes.

B <code>[(ngModel)]</code> combines property binding and event binding to sync the input value and component property automatically.

C <code>[(ngModel)]</code> is a one-way binding from the component property to the input element.

D <code>[(ngModel)]</code> requires manual event listeners to update the component property.

💡 Hint

Think about what the square brackets and parentheses mean in Angular binding syntax.

The syntax [(ngModel)] is syntactic sugar combining [ngModel] (property binding) and (ngModelChange) (event binding) to keep the input and property in sync.

Practice

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

easy

A. It creates a two-way binding between the input field and the component property.

B. It only updates the component property when the form is submitted.

C. It binds the input field to a CSS class dynamically.

D. It disables the input field until a condition is met.

Solution

1. Step 1: Understand the purpose of [(ngModel)]

   This directive links the input element's value and the component's property so changes in one reflect in the other automatically.

2. Step 2: Compare options with this behavior

   Only "It creates a two-way binding between the input field and the component property." describes this two-way binding behavior correctly; others describe unrelated or incorrect behaviors.

3. Final Answer:

   It creates a two-way binding between the input field and the component property. -> Option A

4. Quick Check:

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

Hint: Remember: [(ngModel)] syncs input and data both ways [OK]

Common Mistakes:

• Thinking [(ngModel)] only updates on submit
• Confusing ngModel with CSS binding
• Assuming it disables inputs

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Angular two-way binding syntax

   Two-way binding uses the banana-in-a-box syntax: [(ngModel)] to bind and listen simultaneously.

2. Step 2: Match syntax with options

   Only <input [(ngModel)]="username"> uses [(ngModel)] correctly; others use one-way binding or invalid syntax.

3. Final Answer:

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

4. Quick Check:

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

Hint: Use banana brackets [( )] around ngModel for two-way binding [OK]

Common Mistakes:

• Using only square brackets or parentheses alone
• Forgetting the quotes around the property
• Using plain ngModel without brackets

3. Given this component code:

export class MyComponent {
  name = 'Alice';
}

And this template snippet:

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

What will be displayed if the user types "Bob" in the input field?

medium

A. Hello, Alice!

B. Hello, !

C. Hello, Bob!

D. Hello, {{ name }}!

Solution

1. Step 1: Understand two-way binding effect on component property

   Typing "Bob" updates the name property in the component because of [(ngModel)].

2. Step 2: Check template interpolation

   The paragraph uses {{ name }}, so it reflects the updated value "Bob" immediately.

3. Final Answer:

   Hello, Bob! -> Option C

4. Quick Check:

   Input changes update property and view [OK]

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

Common Mistakes:

• Thinking interpolation won't update after input change
• Confusing interpolation syntax with literal text
• Ignoring two-way binding effect

4. What is the main issue with this Angular template snippet?

<input [(ngModel)]="email">

Assuming the component has a property email defined, but the app throws an error at runtime.

medium

A. Missing import of FormsModule in the module.

B. The property email is not initialized in the component.

C. The input element is missing a closing tag.

D. Two-way binding syntax is incorrect; should use [ngModel].

Solution

1. Step 1: Identify common runtime error cause for ngModel

   Using [(ngModel)] requires importing FormsModule in the Angular module; missing it causes errors.

2. Step 2: Evaluate other options

   Property initialization is optional; input tags can be self-closing; syntax is correct with [(ngModel)].

3. Final Answer:

   Missing import of FormsModule in the module. -> Option A

4. Quick Check:

   FormsModule import required for ngModel [OK]

Hint: Always import FormsModule to use ngModel [OK]

Common Mistakes:

• Forgetting to import FormsModule
• Assuming property must be initialized
• Confusing input tag syntax
• Misreading two-way binding syntax

5. You want to create a form with two inputs: firstName and lastName, both using two-way binding. You also want to display the full name dynamically as "First Last". Which template code correctly implements this with accessibility in mind?

hard

A.

Hello, {{ firstName + ' ' + lastName }}!

B. First Name

Last Name

Hello, {{ firstName }} {{ lastName }}!

C. First Name
Last Name
Hello, {{ firstName + ' ' + lastName }}!

D.

Hello, {{ firstName }} {{ lastName }}!

Solution

1. Step 1: Check for proper labels and accessibility

   <label for="first">First Name</label> <input id="first" [(ngModel)]="firstName" aria-label="First Name"> <label for="last">Last Name</label> <input id="last" [(ngModel)]="lastName" aria-label="Last Name"> <p>Hello, {{ firstName }} {{ lastName }}!</p> uses <label for=...> with matching id on inputs and includes aria-label, improving accessibility.

2. Step 2: Verify two-way binding and display

   Both inputs use [(ngModel)] correctly, and the full name is displayed with interpolation combining both properties.

3. Final Answer:

   <label for="first">First Name</label> <input id="first" [(ngModel)]="firstName" aria-label="First Name"> <label for="last">Last Name</label> <input id="last" [(ngModel)]="lastName" aria-label="Last Name"> <p>Hello, {{ firstName }} {{ lastName }}!</p> -> Option B

4. Quick Check:

   Labels with for/id + ngModel + interpolation = <label for="first">First Name</label> <input id="first" [(ngModel)]="firstName" aria-label="First Name"> <label for="last">Last Name</label> <input id="last" [(ngModel)]="lastName" aria-label="Last Name"> <p>Hello, {{ firstName }} {{ lastName }}!</p> [OK]

Hint: Use with matching input id for accessibility [OK]

Common Mistakes:

• Omitting labels or using labels without for/id
• Not combining names properly in display
• Missing aria-labels for screen readers