[Solved] Given this component code:export class AppComponent { message = 'Hello'; }And this template:<input [(ngModel)]="message"> <p>{{ message }}</p>What happens when the user types 'Hi' in the input box? | Angular

Angular - Templates and Data Binding

Given this component code:

export class AppComponent {
  message = 'Hello';
}

And this template:

<input [(ngModel)]="message">
<p>{{ message }}</p>

What happens when the user types 'Hi' in the input box?

AThe paragraph text stays 'Hello' until the input loses focus

BThe paragraph text updates to 'Hi' immediately

CThe input box clears automatically

DAn error occurs because message is not updated

Step-by-Step Solution

Solution:

Step 1: Understand two-way binding behavior
With [(ngModel)], changes in the input update the component property immediately.
Step 2: Check the template binding
The paragraph uses interpolation to show the current value of message, so it updates as message changes.
Final Answer:
The paragraph text updates to 'Hi' immediately -> Option B
Quick Check:
Two-way binding updates view instantly = A [OK]

Quick Trick: ngModel updates component and view instantly [OK]

Common Mistakes:

Master "Templates and Data Binding" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this component code: