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.