[Solved] Given this component code:export class MyComponent { name = 'Al... }And this template:<input [(ngModel)]="name"> <p>Hello, {{name}}!</p>What will be displayed after the user types "Bob" in the input? | Angular

Angular - Template-Driven Forms

Given this component code:

export class MyComponent {
  name = 'Alice';
}

And this template:

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

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

AHello, !

BHello, Alice!

CHello, {{name}}!

DHello, Bob!

Step-by-Step Solution

Solution:

Step 1: Understand two-way binding effect
Typing "Bob" updates the component property name because of [(ngModel)].
Step 2: Check template interpolation
The paragraph uses {{name}}, so it shows the updated value "Bob".
Final Answer:
Hello, Bob! -> Option D
Quick Check:
Typing updates property and view = Hello, Bob! [OK]

Quick Trick: Typing changes property, interpolation updates view [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this component code: